Question

好的，我明白我似乎没有努力，但我对此真的很陌生我在Dreamweaver中没有出现任何错误。

我删除了我的旧示例，这就是我现在所拥有的，尝试集成看看OBJ装载机，相机和灯光的功能。

我想我了解代码中或多或少发生了什么，但它仍然不起作用，我认为这是因为有一个代码窗口调整大小，但看功能剂量不考虑，因此它不起作用，因为函数假设一个固定的窗口大小，我在这儿吗？

此外，我不确定我是否需要obj加载器中的两个注释行 object.rotateX（Math.PI / 2）;和object.lookAt（new THREE.Vector3（0,0,0））; 既然这只是为了获得起始位置？如果我将这些拖曳线放回去，它只会将物体旋转到初始姿势，但物体不会相对于鼠标位置转动。

我真的不确定这里有什么冲突

我现在将代码更改为：

<script>

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

var camera, scene;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

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(40, window.innerWidth / window.innerHeight, 1, 1500);
    camera.position.x = 0;
    camera.position.z = 100;
    camera.position.y = 0;
    camera.lookAt({
        x: 0,
        y: 0,
        z: 0,
    });

    scene = new THREE.Scene();

    // LIGHTS
    scene.add(new THREE.AmbientLight(0x666666, 0.23));

    var light;

    light = new THREE.DirectionalLight(0xffc1c1, 2.20);
    light.position.set(0, 100, 0);
    light.position.multiplyScalar(1.2);

    light.castShadow = true;
    light.shadowCameraVisible = true;

    light.shadowMapWidth = 512;
    light.shadowMapHeight = 512;

    var d = 50000;

    light.shadowCameraLeft = -d;
    light.shadowCameraRight = d;
    light.shadowCameraTop = d;
    light.shadowCameraBottom = -d;

    light.shadowcameranear = 0.5;
    light.shadowCameraFar = 1000;
    //light.shadowcamerafov = 30;
    light.shadowDarkness = 0.1;

    scene.add(light);

    var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath( 'model/' );
                mtlLoader.load( 'rope.mtl', function( materials ) {
                    materials.preload();
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials( materials );
                    objLoader.setPath( 'model/' );
                    objLoader.load( 'rope.obj', function ( object ) {

            var positionX = 0;
            var positionY = 0;
            var positionZ = 0;

          object.position.x = positionX;
          object.position.y = positionY;
          object.position.z = positionZ;
          object.scale.x = 1;
          object.scale.y = 1;
          object.scale.z = 1;
          //object.rotateX(Math.PI / 2);

          //object.lookAt(new THREE.Vector3(0, 0, 0));

          // castshow setting for object loaded by THREE.OBJLoader()
          object.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
              child.castShadow = true;
              child.receiveShadow = true;
            }
          });

          scene.add(object);
            });
        });



    // RENDERER
    //webglRenderer = new THREE.WebGLRenderer();
    webglRenderer = new THREE.WebGLRenderer({
    antialias: true
    });
    webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    webglRenderer.domElement.style.position = "relative";
    webglRenderer.shadowMapEnabled = true;
    webglRenderer.shadowMapSoft = true;
    //webglRenderer.antialias: true;

    container.appendChild(webglRenderer.domElement);
    window.addEventListener('resize', onWindowResize, false);
}

window.addEventListener("mousemove", onmousemove, false);

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 0), 0);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersectPoint = new THREE.Vector3();

function onmousemove(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    raycaster.ray.intersectPlane(plane, intersectPoint);
    object.lookAt(intersectPoint);
}       

function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

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

    webglRenderer.setSize(window.innerWidth, window.innerHeight);
}


function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {
    camera.lookAt(scene.position);
    webglRenderer.render(scene, camera);
}

    </script>

Answer 1

我接受了您的代码并进行了调整，因此它不需要obj并将其放入此codepen。主要问题似乎是您的交叉平面定义不正确。第一个参数是法向量，需要长度为1.您的值为0.因此没有有意义的交叉点。

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 0), 0);

如果您将其更改为

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 10);

交叉点更有意义，物体实际旋转。

three.js - 对象看鼠标

1 个答案: