Question

当我把一架飞机放在一个盒子上时，我遇到了问题当我移动全部或相机时，飞机会在某个位置消失

我觉得这与盒子的多边形有关，但我真的不知道

您可以在此处查看示例：http://jsfiddle.net/fv9sqsoj/9/

var camera, scene, renderer,controls,Allobjects;
init();
animate();

function init() {
    renderer = new THREE.CanvasRenderer();
    renderer.setClearColor(0x000000, 1.0);
    renderer.setSize(770, 478);
    document.getElementById('fd__3d').appendChild(renderer.domElement);
    // on initialise la scène
    scene = new THREE.Scene();
    // on initialise la camera que l’on place ensuite sur la scène
    camera = new THREE.PerspectiveCamera(50, 770 / 478, 1, 1000);
    camera.position.set(0, 300, 600);
    scene.add(camera);
    camera.rotation.x = -0.4;
    // on ajoute une lumière blanche
    var lumiere = new THREE.DirectionalLight(0xffffff, 1.0);
    lumiere.position.set(0, 200, 500);
    scene.add(lumiere);
    // objets conteneurs
    var objects = new THREE.Object3D();
    Allobjects = new THREE.Object3D();
    Allobjects.add(objects);
    scene.add(Allobjects);
    // box
    var geometry = new THREE.CubeGeometry(100, 20, 100);
    var color = 0xffffff;
    var material = new THREE.MeshLambertMaterial({
        color: color,
        shading: THREE.SmoothShading,
        vertexColors: THREE.VertexColors,
        overdraw: true
    });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.renderDepth = 0;
    // ajout de la box
    var objectsM = new THREE.Object3D();
    objectsM.add(mesh);
    objects.add(objectsM);
    // plane
    var materialP = new THREE.MeshLambertMaterial({
        color: 0xFF0000,
        overdraw: true,
        side: THREE.DoubleSide
    });
    var imgplane = new THREE.Mesh(new THREE.PlaneGeometry(50, 50),materialP);
    imgplane.renderDepth = 1;
    // ajout et position plane
    objects.add(imgplane);
    var angleRadian = Math.PI * Math.round(90) / 180;
    imgplane.rotation.x = angleRadian;
    imgplane.position.y = 11;
    imgplane.position.x = 10;
    imgplane.position.z = 10;
}

function animate() {
    Allobjects.rotation.y += 0.01
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

Thanx为你提供帮助！

Answer 1

完成WestLangley的答案

这是CanvasRenderer的问题

当您按照WestLangley发布的帖子增加曲面细分时，这并没有那么糟糕： Disappearing Objects - Three.js CanvasRenderer

var geometry = new THREE.PlaneGeometry( width, height, 10, 10 );

但它并没有真正解决问题

最好的方法是使用WebGLRenderer 因为所有的浏览器都不支持他，有WebGL探测器供他使用，那么它是可能的： https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();

三架飞机在一个盒子上

1 个答案: