Three.js將圖片加載爲紋理而不渲染

它沒有加載，但首先渲染？

var geometry = new THREE.BoxGeometry(2, 1, 1); 

    material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("g.png") }); 
    var cube = new THREE.Mesh(geometry, material); 
    scene.add(cube);

的完整代碼

https://gist.github.com/EasonWang01/410046ababc1af4f7f2db4b294b591ca

來源

2017-04-26 user7924038

我寫了sample根據你的代碼，希望會幫助你。

<html> 
<head> 
    <title>My first Three.js app</title> 
    <style> 
    body { margin: 0; } 
    canvas { width: 100%; height: 100% } 
    </style> 
</head> 
<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"> </script> 
<script> 
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
    camera.lookAt(new THREE.Vector3(0, 0, 0)); 
    var renderer = new THREE.WebGLRenderer({ alpha: false }); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 
    var geometry1 = new THREE.BoxGeometry(12, 1, 1); 
    var material1 = new THREE.MeshBasicMaterial({ color: 0x00FFCC }); 
    var cube1 = new THREE.Mesh(geometry1, material1); 

    scene.add(cube1); 
    var geometry2 = new THREE.BoxGeometry(10, 1, 1); 
    var material2 = new THREE.MeshBasicMaterial({ color: 0xCCFF33 }); 
    var cube2 = new THREE.Mesh(geometry2, material2); 

    scene.add(cube2); 
    var geometry3 = new THREE.CircleBufferGeometry(3, 32); 
    var material3 = new THREE.MeshBasicMaterial({ color: 0xCCFFCC  }); 
    var circle3 = new THREE.Mesh(geometry3, material3); 
    scene.add(circle3); 
    var geometry4 = new THREE.BoxBufferGeometry(10, 1, 1); 
    material4 = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("img/g.png") }); 
    var cube4 = new THREE.Mesh(geometry4, material4); 
    scene.add(cube4); 
    var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2); 

    var materials = []; 
    cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
    cube.position.y = 150; 
    scene.add(cube); 

    var light = new THREE.AmbientLight(0x404040); // soft white light 
    scene.add(light); 
    camera.position.z = 5; 
    var geometry = new THREE.BoxGeometry(2, 1, 1); 

    material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("img/g.png") }); 
    var cube = new THREE.Mesh(geometry, material); 
    scene.add(cube); 
    var render = function() { 
    requestAnimationFrame(render); 
    cube.rotation.x += 0.01; 
    cube.rotation.y += 0.01; 
    cube1.rotation.x += 0.02; 
    cube1.rotation.y += 0.02; 
    cube2.rotation.x += 0.03; 
    cube2.rotation.y += 0.03; 
    renderer.render(scene, camera); 
    }; 
    setTimeout(() => {render();},500) 
</script> 
</body> 
</html>

來源

2017-04-26 14:09:43 zoly01

你是什麼意思？你在哪裏載入圖片？你可以編輯我的代碼嗎？ – user7924038

您的代碼仍然無法加載圖片。 – user7924038

但它對本地人不起作用，如果只是保存並打開文件中的代碼。 – user7924038

Three.js將圖片加載爲紋理而不渲染

回答

相關問題