Three.js无法给物体附上纹理图
刚入门，遇到了无法解答的问题希望得到解答
最近在阅读《WebGL 3D开发实战讲解》这本书，看了关于其中的three.js的案例和基础概念，也尝试弄懂其中函数功能，想着只是，通过注释的方式，看懂每个函数干什么是不够的，于是想着把其中1案例的内容在2案例中，对出现的问题进行解决，有的能实现，有的不能。比如：
s-11-7表示Sample11-7,
已经实现的：其中S11-1作为基础，将11-3的几何平面加入，加入点光源，成功。
没有实现的：其中S11-1作为基础，将12-3中地面的纹理代码加入，修改原有平面变量名称，并将12-3的头文件都加入，html页面可以弹出但是为空白。
其中的样例的原始代码已经给出，其中附带的一些问题图文件可以去https://www.epubit.com/%E4%B8%8B%E8%BD%BD%EF%BC%8C%E5%9B%A0%E4%B8%BAcsdn%E5%A5%BD%E5%83%8F%E6%94%BE%E4%B8%8D%E4%BA%86%E6%96%87%E4%BB%B6%E5%A4%B9
我将书中案例原始代码给出。
12-3的案例太长了，但是地面纹理加入这块十分简单，贴出这一块。
原始S11-1
<!DOCTYPE html>
<html>
<head>
<title>Sample11_1</title>
<script type="text/javascript" src="util/three.js"></script>
<style>
body{margin: 0;overflow: hidden;}
</style>
</head>
<body>
<div id="WebGL-output">
</div>
<script type="text/javascript">
//当网页加载完成后运行的JavaScript方法
function init() {
var scene = new THREE.Scene();//新建场景
//新建摄像机位置
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();//新建渲染器
renderer.setClearColor(new THREE.Color(0xffffff));//设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染窗口大小
var axes = new THREE.AxesHelper(6);//新建坐标辅助对象
scene.add(axes);//将坐标辅助对象添加到场景中
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);//创建球体的几何体
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true});//创建基本材质
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 0;//设置球体的位置
sphere.position.y = 0;
sphere.position.z = 0;
scene.add(sphere);//将球体添加到场景中
camera.position.x = 10;//设置摄像机位置
camera.position.y = 10;
camera.position.z = 10;
camera.lookAt(scene.position);//设置摄像机焦点
//将渲染结果添加到网页的元素中
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderScene();
function renderScene() {
sphere.rotation.y += 0.02;
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
}
window.onload = init;//当网页加载后执行init方法
</script>
</body>
</html>
S11-7
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Sample11_7</title>
<script type="text/javascript" src="util/three.js"></script>
<script type="text/javascript" src="util/dat.GUI.js"></script>
<style>
body{margin: 0;overflow: hidden;}
</style>
</head>
<body>
<div id="WebGL-output">
</div>
<script type="text/javascript">
//当网页加载完成后运行的JavaScript方法
function init() {
var scene = new THREE.Scene();//新建场景
//新建摄像机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();//新建渲染器
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染窗口大小
renderer.setClearColor(new THREE.Color(0x000000));//设置背景颜色
/* var axes = new THREE.AxesHelper(6);//新建坐标辅助对象
scene.add(axes);//将坐标辅助对象添加到场景中 */
var planeGeometry = new THREE.PlaneGeometry(60, 20);//新建长方形平面
var planeMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});//新建平面使用的材质
var plane = new THREE.Mesh(planeGeometry, planeMaterial);//新建网格对象
plane.rotation.x = -0.5 * Math.PI;//设置平面的旋转角度
plane.position.x = -10;//设置长方形平面的位置
plane.position.y = -5;
plane.position.z = -2;
scene.add(plane);//将长方形平面添加到场景中
camera.position.x = 30;//设置摄像机位置
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(scene.position);//设置摄像机焦点
var radius = 50;//点光源的圆形轨道半径
var pointLightAngle = 0;//点光源旋转的角度
function addGeometry(){//添加几何对象的方法
var geometryArray=[];//存储几何对象的数组
geometryArray.push(new THREE.BoxGeometry(4, 4, 4));//新建正方体
geometryArray.push(new THREE.CylinderGeometry(1, 4, 4));//新建圆台
geometryArray.push(new THREE.SphereGeometry(2));//新建球体
geometryArray.push(new THREE.IcosahedronGeometry(4));//新建正二十面体
geometryArray.push(new THREE.OctahedronGeometry(3));//新建正八面体
geometryArray.push(new THREE.TetrahedronGeometry(3));//新建正四面体
geometryArray.push(new THREE.TorusGeometry(3, 1, 10, 10));//新建圆环
geometryArray.push(new THREE.TorusKnotGeometry(3, 0.5, 50, 20));//新建圆环结
geometryArray.push(new THREE.PlaneGeometry(4,2));//新建长方形平面
geometryArray.push(new THREE.CircleGeometry(4,18));//新建圆面
var material=new THREE.MeshPhongMaterial({color: 0xff0000});
for(var i=0;i<geometryArray.length;i++){//遍历所有几何对象
var mesh=new THREE.Mesh(geometryArray[i], material);//创建网格对象
mesh.position.x=-24+Math.floor(i/2)*10;//确定网格对象的位置
mesh.position.y=0;
mesh.position.z=(i%2==0)?-4:4;
scene.add(mesh);//将网格对象添加到场景中
}
}
addGeometry();//添加几何对象
function addLightAndGUI(){
var ambiColor = "#42545e";
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);
var pointColor = "#828982";//点光源的颜色值
pointLight = new THREE.PointLight(pointColor);//创建点光源
pointLight.position.x =0; //设置点光源的x坐标
pointLight.position.y =30; //设置点光源的y坐标
pointLight.position.z =0; //设置点光源的z坐标
scene.add(pointLight);//将点光源添加到场景中
var controls = new function () {
this.ambiColor = ambiColor;
this.pointColor = pointColor;
this.intensity = 1;
this.distance = 100;
this.closePointLight = false;
this.closeAmbientLight= false;
};
var gui = new dat.GUI();
gui.addColor(controls, 'pointColor',"点光源颜色").onChange(function (e) {
pointLight.color = new THREE.Color(e);
});
gui.add(controls, 'intensity', 0, 3,"点光源光线强度").onChange(function (e) {
pointLight.intensity = e;
});
gui.add(controls, 'distance', 0, 200,"点光源照射的最大距离").onChange(function (e) {
pointLight.distance = e;
});
gui.add(controls, 'closePointLight',"是否关闭点光源").onChange(function (e) {
pointLight.visible = !e;
});
gui.addColor(controls, 'ambiColor',"环境光颜色").onChange(function (e) {
ambientLight.color = new THREE.Color(e);
});
gui.add(controls, 'closeAmbientLight',"是否关闭环境光").onChange(function (e) {
ambientLight.visible=!e;
});
}
addLightAndGUI();
//将渲染结果添加到网页的元素中
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderScene();//渲染画面
function renderScene() {
pointLightAngle+=1;
pointLight.position.x =radius*Math.sin(pointLightAngle/180*Math.PI);
pointLight.position.z =radius*Math.cos(pointLightAngle/180*Math.PI);
requestAnimationFrame(renderScene);//请求绘制下一帧
renderer.render(scene, camera);//渲染当前画面
}}
window.onload = init;//当网页加载后执行init方法
</script>
</body>
</html>
12-3的地面纹理部分，加入11-1，先是完全添加一个新的物体，没有用。在11-1的集合体上改动，也不行。
// ---------------------
// 创建地面
// ---------------------
var groundTexture = new textureLoader.load( 'textures/campfire/grass1.jpg' );//加载纹理
groundTexture.wrapS = THREE.RepeatWrapping; //纹理S坐标设置为重复拉伸
groundTexture.wrapT = THREE.RepeatWrapping; //纹理T坐标设置为重复拉伸
groundTexture.repeat.set( 10, 10 ); //纹理重复拉伸10次
var groundMaterial = new THREE.MeshLambertMaterial( { //设置材质
color: 0xffffff,
map: groundTexture,
vertexColors: THREE.NoColors,
side: THREE.BackSide
} );
var groundGeometry = new THREE.PlaneGeometry( 1000, 1000, 30, 30 );//设置平面
var groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
groundMesh.position.y = 0;
groundMesh.rotation.x = Math.PI / 2.0;
groundMesh.receiveShadow = true;
scene.add( groundMesh );
12-3的头文件部分
虽然把js文件都加入了11-1，但是没有用
<!DOCTYPE>
<html>
<head>
<!--火焰粒子-->
<title>Sample12_3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJLoader.js"></script>
<script src='js/dat.gui.min.js'></script>
<script src="js/Atlas.js"></script>
<script src="js/Particles.js"></script>
<script src="js/ParticleSystem.js"></script>
<script src="js/ParticleSystemFrameset.js"></script>
<script src="js/ParticleModifiers.js"></script>
<script src="js/Util.js"></script>
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 50;
display:block;
}
#info a { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
<title>Photons - A Particle System for Three.js</title>
</head>
<body>
<div id="renderingContainer" style="position: absolute; left:0px; top:0px"></div>
将12-3的的纹理地面添加到一个简单场景11-1中
已经解决