javascript - 三.js如何应用纹理作为 Material

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 你会得到很多失真。