三.js如何应用纹理作为材质

Question

我偶然发现了 Three.js，我非常喜欢它。我是 JavaScript 新手，但我想了解更多关于动画等的知识。

//更新 我目前有这个代码，但它没有做任何事情。如果我尝试在没有自定义纹理的情况下执行此操作，那么它会呈现一个立方体。所以目前除了纹理之外一切都正常。

var camera, scene, renderer;
var mouseX = 0, mouseY = 0;

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

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 500;

    scene = new THREE.Scene();

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    var cubeTexture = new THREE.texture();
    var loader = new THREE.ImageLoader();

    loader.addEventListener("load", function(event) {
        cubeTexture.image = event.content;
        cubeTexture.needsUpdate = true;
    });

    loader.load("crate.gif");

    var geometry = new THREE.CubeGeometry(300, 300, 300);
    var material = new THREE.MeshBasicMaterial({ map: cubeTexture, overdraw: true });

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    container.appendChild( renderer.domElement );

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

}

function onDocumentMouseMove( event ) {

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

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {
    camera.position.x += ( mouseX - camera.position.x ) * 0.05;
    camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
    camera.lookAt( scene.position );

    renderer.render( scene, camera );
}

任何帮助将不胜感激！

Answer 1

您应该已经在控制台中看到了您的错误。

   var cubeTexture = new THREE.Texture();

免费提示：这样做

   var geometry = new THREE.CubeGeometry( 300, 300, 300, 4, 4, 4 );

否则，使用 CanvasRenderer 你会得到很多失真。

Answer 2

所以如果我理解正确的话，你想让图像随着你的鼠标拉伸和移动吗？ 为什么不为此使用javascript？ 您可以轻松读出鼠标的 y 和 x 位置，然后动态更改图像的位置。 如果我错了，请纠正我，但如果这是你想要的，我建议使用 javascript。

真诚地， 哈门布林克曼。