Question

我正在使用three.js中的文件并使用OBJloader并使用canvas进行渲染。除非我将对象缩放1000并将相机设置为2，否则无法找到对象。代码如下所示。

<script src="../mrdoob/build/three.min.js"></script>
<script src="../mrdoob/examples/js/loaders/OBJLoader.js"></script>
<script src="../mrdoob/examples/js/renderers/CanvasRenderer.js"></script>
<script src="../mrdoob/examples/js/renderers/Projector.js"></script>
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth /     window.innerHeight, 1, 2000);
//camera.position.z = 100;
camera.position.z = 2;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);

                    // texture

                    var manager = new THREE.LoadingManager();
                    manager.onProgress = function (item, loaded, total) {

                        console.log(item, loaded, total);

                    };

                    var texture = new THREE.Texture();

                    var onProgress = function (xhr) {
                        if (xhr.lengthComputable) {
                            var percentComplete = xhr.loaded / xhr.total * 100;
                            console.log(Math.round(percentComplete, 2) + '% downloaded');
                        }
                    };

                    var onError = function (xhr) {
                        alert(xhr);
                    };

                    alert("hi");

                    var loader = new THREE.ImageLoader(manager);
                    loader.load('../mrdoob/examples/textures/UV_Grid_Sm.jpg', function (image) {
                        texture.image = image;
                        texture.needsUpdate = true;

                    });

                    // model
                    alert("hi2");
                    var loader = new THREE.OBJLoader();
                    loader.load('../mrdoob/examples/obj/male02/male02.obj', function (object) {

                        object.scale = new THREE.Vector3(1000, 1000, 1000);
                        alert(object.position.y);
                        scene.add(object);
                    });



                    //
                    alert("hi3");

                    renderer = new THREE.CanvasRenderer();
                    renderer.setClearColor(0xf0f0f0);
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    container.appendChild(renderer.domElement);

                    document.addEventListener('mousemove', onDocumentMouseMove, false);

                    //

                    window.addEventListener('resize', onWindowResize, false);
                    alert("hi4");

                }

                function onWindowResize() {

                    windowHalfX = window.innerWidth / 2;
                    windowHalfY = window.innerHeight / 2;

                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();

                    renderer.setSize(window.innerWidth, window.innerHeight);

                }

                function onDocumentMouseMove(event) {

                    mouseX = (event.clientX - windowHalfX) / 2;
                    mouseY = (event.clientY - windowHalfY) / 2;

                }

                //

                function animate() {

                    requestAnimationFrame(animate);
                    render();

                }

                function render() {

                    camera.position.x += (mouseX - camera.position.x) * .05;
                    camera.position.y += (-mouseY - camera.position.y) * .05;

                    camera.lookAt(scene.position);

                    renderer.render(scene, camera);

                }

    </script>

我对对象做了警告，并且位置结果为零，所以我不确定对象是否正确加载。如果有人能告诉我如何寻找对象会很好。

Answer 1

如果相机位于物体内部，则可能会导致物体的背面始终看到并忽略它。

请提供jsfiddle现场示例。

Three.js找不到Obj

1 个答案: