Three.js 加载纹理问题，与动画一起使用，空白而不显示
我不熟悉three.js，但我刚刚完成一个使用Java和JMonkeyEngine的项目，所以我知道如何使用3d 我的问题是加载纹理。我相信这个问题在我读过的主题中已经出现了很多次，但是我看到的主题都比较老，而且它与我需要的东西不起作用 我从网站上拿了一个例子，试着根据自己的需要编辑它。我能够很好地加载我的纹理，它像示例一样旋转 但是，当我从渲染过程中删除动画时，我的图像变差了。我可以使用颜色很好的正方形，但没有纹理Three.js 加载纹理问题，与动画一起使用，空白而不显示,three.js,textures,render,Three.js,Textures,Render,我不熟悉three.js，但我刚刚完成一个使用Java和JMonkeyEngine的项目，所以我知道如何使用3d 我的问题是加载纹理。我相信这个问题在我读过的主题中已经出现了很多次，但是我看到的主题都比较老，而且它与我需要的东西不起作用 我从网站上拿了一个例子，试着根据自己的需要编辑它。我能够很好地加载我的纹理，它像示例一样旋转 但是，当我从渲染过程中删除动画时，我的图像变差了。我可以使用颜色很好的正方形，但没有纹理 <!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometries</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera(
45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400;
scene = new THREE.Scene();
var light, object;
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 0 );
scene.add( light );
var map = THREE.ImageUtils.loadTexture( 'butter.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
var material =
new THREE.MeshLambertMaterial(
{ ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } );
//
object = new THREE.Mesh(
new THREE.PlaneGeometry(100, 100, 4, 4 ), material );
object.position.set( -400, 0, 0 );
scene.add( object );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos( timer ) * 800;
camera.position.z = Math.sin( timer ) * 800;
camera.lookAt( scene.position );
for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
var object = scene.children[ i ];
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
}
renderer.render( scene, camera );
}
</script>
</body>
three.js webgl-几何图形
身体{
字体系列：Monospace；
背景色：#000；
边际：0px；
溢出：隐藏；
}
var容器，stats；
摄像机、场景、渲染器；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
照相机=新的三个。透视照相机（
45，window.innerWidth/window.innerHeight，1，2000）；
摄像机位置y=400；
场景=新的三个。场景（）；
var光，物体；
添加（新的三个环境光（0x404040））；
灯光=新的三个方向灯光（0xffffff）；
光。位置。设置（0，1，0）；
场景。添加（灯光）；
var map=THREE.ImageUtils.loadTexture（'butter.jpg'）；
map.wrapps=map.wrapT=THREE.RepeatWrapping；
map.各向异性=16；
可变材料=
新的三种材料（
{ambient:0xbbbbbb，map:map，side:THREE.DoubleSide}）；
//
对象=新的三个网格（
新三。平面几何（1001004），材料；
object.position.set（-400,0,0）；
场景。添加（对象）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.doElement）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
//
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
var timer=Date.now（）*0.0001；
camera.position.x=数学cos（计时器）*800；
camera.position.z=Math.sin（计时器）*800；
摄像机。注视（场景。位置）；
对于（变量i=0，l=scene.children.length；i<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry(1,1,1);
var map = THREE.ImageUtils.loadTexture('butter.jpg', {}, function() {render();});
// render();
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
var material = new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } );
//var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render()
{
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();
</script>
</body>
我的前三个.js应用程序
画布{宽度：100%；高度：100%}
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var map=THREE.ImageUtils.loadTexture（'butter.jpg'，{}，function（）{render（）；}）；
//render（）；
map.wrapps=map.wrapT=THREE.RepeatWrapping；
map.各向异性=16；
var material=new THREE.MeshLambertMaterial（{ambient:0xbbbbbb，map:map，side:THREE.DoubleSide}）；
//var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
函数render（）
{
请求动画帧（渲染）；
立方体旋转.x+=0.1；
立方体旋转y+=0.1；
渲染器。渲染（场景、摄影机）；
}
render（）；