时间戳

首页 > 解决方案 > 我可以在 three.js 对象上看到线条，即使线框已关闭

three.js - 我可以在 three.js 对象上看到线条，即使线框已关闭

问题描述

https://gyazo.com/7ea04fad47507a06fe7d38afbc58562b 我可以在这个黑盒子上看到这些奇怪的白线（两个黑盒子，请注意。）这很奇怪，我从未指定我的代码来执行此操作。有什么办法可以完全关闭它吗？这很烦人.. 我的代码（它是 Three.JS + Cannon.JS 的例子，由任何人制作，但经过修改）：

var world, mass, body, shape, timeStep=1/60,
     camera, scene, renderer, geometry, material, mesh;
  initThree();
  initCannon();
  animate();
  function initCannon() {
      world = new CANNON.World();
      world.gravity.set(0,0,0);
      world.broadphase = new CANNON.NaiveBroadphase();
      world.solver.iterations = 10;
      shape = new CANNON.Box(new CANNON.Vec3(1,1,1));
      mass = 1;
      body = new CANNON.Body({
        mass: 1
      });
      body.addShape(shape);
      body.angularVelocity.set(0,10,0);
      body.angularDamping = 0.5;
      world.addBody(body);
  }
  function initThree() {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );
      camera.position.z = 5;
      scene.add( camera );
      geometry = new THREE.BoxGeometry( 2, 2, 2 );
      material = new THREE.MeshPhongMaterial( {shininess:0, color: 0xffffff } );
      mesh = new THREE.Mesh( geometry, material );
      geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
      material2 = new THREE.MeshPhongMaterial( {shininess:0, color: 0xff0000 } );
      mesh2 = new THREE.Mesh( geometry2, material2 );
      mesh2.position.y = 2;
      scene.add( mesh );
      scene.add( mesh2 );
      renderer = new THREE.CanvasRenderer({ alpha:true });
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
  }
  function animate() {
      requestAnimationFrame( animate );
      updatePhysics();
      render();
  }
  function updatePhysics() {
      // Step the physics world
      world.step(timeStep);
      // Copy coordinates from Cannon.js to Three.js
      mesh.position.copy(body.position);
      mesh.quaternion.copy(body.quaternion);
  }
  function render() {
      renderer.render( scene, camera );
  }

标签： three.jselectroncannon.js

解决方案

你能用 WebGLRenderer 代替 CanvasRenderer 吗？Canvas 渲染器更像是一个 webGL 模拟器，而不是一个渲染器。如果我切换到 WebGL 渲染器，线条就会消失。

var world, mass, body, shape, timeStep = 1 / 60,
  camera, scene, renderer, geometry, material, mesh,controls;
initThree();
initCannon();
animate();

function initCannon() {
  world = new CANNON.World();
  world.gravity.set(0, 0, 0);
  world.broadphase = new CANNON.NaiveBroadphase();
  world.solver.iterations = 10;
  shape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
  mass = 1;
  body = new CANNON.Body({
    mass: 1
  });
  body.addShape(shape);
  body.angularVelocity.set(0, 100, 0);
  body.angularDamping = 0.5;
  world.addBody(body);
}

function initThree() {
  renderer = new THREE.WebGLRenderer({
    alpha: true
  });
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);
  camera.position.z = 10;
  camera.position.y = 1;

  scene.add(camera);


  var light = dirLight = new THREE.DirectionalLight(0xFFFFFF);
  scene.add(light);

  //Shadowmapping
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  //renderer.shadowMap.bias = 0.1;
  light.position.set(5, 5, 5);
  light.userData.targetOffset = light.position.clone();
  light.castShadow = true;
  light.shadow.mapSize.width = 512;
  light.shadow.mapSize.height = 512;
  light.shadow.camera.near = 0.1;
  light.shadow.camera.far = 100.0
  var shadowAreaLength = 10
  light.shadow.camera.left = light.shadow.camera.bottom = -shadowAreaLength;
  light.shadow.camera.right = light.shadow.camera.top = shadowAreaLength;

    controls = new THREE.OrbitControls(camera,renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.5;
    controls.autoRotate = true;
    controls.maxPolarAngle *= 0.5;
    controls.panSpeed *= 0.5;
    controls.rotateSpeed *= 0.25;
   // camera.position.set(0, 0.5, 1.7);


  geometry = new THREE.BoxGeometry(2, 2, 2);
  material = new THREE.MeshPhongMaterial({
    shininess: 0,
    color: 0x808080

  });
  mesh = new THREE.Mesh(geometry, material);
  mesh.castShadow = true;
  geometry2 = new THREE.BoxGeometry(1, 1, 1);
  material2 = new THREE.MeshPhongMaterial({
    shininess: 0,
    color: 0xff0000
  });
  mesh2 = new THREE.Mesh(geometry2, material2);
  mesh2.position.y = 2;
  scene.add(mesh);
  scene.add(mesh2);


  var gplane =
    new THREE.Mesh(new THREE.PlaneGeometry(100, 100, 10, 10), material);
  scene.add(gplane);

  gplane.recieveShadow = true;

  gplane.rotation.x += Math.PI * -0.5;
  gplane.position.y -= 2

camera.lookAt(gplane.position);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}

function animate() {
  requestAnimationFrame(animate);
        controls.update();
  updatePhysics();
  render();
}

function updatePhysics() {
  // Step the physics world
  world.step(timeStep);
  // Copy coordinates from Cannon.js to Three.js
  mesh.position.copy(body.position);
  mesh.quaternion.copy(body.quaternion);
}

function render() {
  renderer.render(scene, camera);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

推荐阅读