Three.js как применить текстуру как материал

Question

Я просто наткнулся на Three.js, и мне это очень понравилось. Я новичок в JavaScript, но я хотел бы узнать больше об анимации и т. Д.

// UPDATE У меня есть этот код, но он ничего не делает. Если я попытаюсь сделать это без специальной текстуры, то он отобразит куб. Таким образом, все в настоящее время работает, кроме текстуры.

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.

С уважением, Harmen Brinkman.