1.我一开始做的时候也是，跟着教程做的，死活不出效果
这是我当时的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<!-- <script src=".././three.js-master/examples/js/controls/OrbitControls.js"></script> -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<script>
let scene = new THREE.Scene();
let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
0, 0, 0, //顶点1坐标
50, 0, 0, //顶点2坐标
0, 100, 0, //顶点3坐标
0, 0, 0, //顶点4坐标
0, 0, 100, //顶点5坐标
50, 0, 0, //顶点6坐标
])
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
var normals = new Float32Array([
0, 0, 1, //顶点1法向量
0, 0, 1, //顶点2法向量
0, 0, 1, //顶点3法向量
0, 1, 0, //顶点4法向量
0, 1, 0, //顶点5法向量
0, 1, 0, //顶点6法向量
]);
// 设置几何体attributes属性的位置normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据
let material = new THREE.MeshBasicMaterial({
color: 0x0000ff,
side:THREE.DoubleSide
});
let point = new THREE.PointLight(0xffffff);
point.position.set(400,200,300);
scene.add(point)
// console.log(geometry.attributes.normal,'geometry.attributes.normal')
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// let ambient = new THREE.AmbientLight
var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);
// let camera = new THREE.OrthographicCamera(-200*window.innerWidth/window.innerHeight,200*window.innerWidth/window.innerHeight,200,-200,1,1000);
let camera = new THREE.OrthographicCamera(-200 * window.innerWidth / window.innerHeight, 200 * window.innerWidth / window.innerHeight, 200, -200, 1, 1000);
camera.position.set(100, 40, 100);
camera.lookAt(scene.position);
// camera.setClearColor(0xb9d3ff,1);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
function rend() {
renderer.render(scene, camera);
}
rend();
let constrols = new THREE.OrbitControls(camera, renderer.domElement);
constrols.addEventListener('change', rend)
</script>
</body>
</html>
解决的办法是，
1.我们使用的材质不对
2.添加的环境光和，点光不要是相同的颜色的光
1.使用的材质
所以这里不要使用MeshBasicMaterial的材质，因为他不受光照影响的材质
效果代码
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<!-- <script src=".././three.js-master/examples/js/controls/OrbitControls.js"></script> -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
let scene = new THREE.Scene() //创建一个场景
let geometry = new THREE.BufferGeometry();//创建一个缓冲几何;
let vertices = new Float32Array([
0,0,0,
50,0,0,
0,100,0,
0,0,0,
0,0,100,
50,0,0,
]);//保存几何体顶点的坐标
geometry.attributes.position = new THREE.BufferAttribute(vertices,3);//为缓冲几何添加位置;
let normals = new Float32Array([
0,0,1,
0,0,1,
0,1,0,
0,1,0,
0,1,0,
])
geometry.attributes.normal = new THREE.BufferAttribute(normals,3);
//为缓冲几何添加顶点法线量
let material = new THREE.MeshPhongMaterial({
color:0x0000ff,
side:THREE.DoubleSide
})//创建材质
let mesh = new THREE.Mesh(geometry,material);//创建出一个模型
scene.add(mesh);//为场景添加一个模型
let point = new THREE.PointLight(0xffffff);//创建一个点光源
point.position.set(400,200,300);//设置点光源的位置
scene.add(point);//向场景中添加点光源
let ambient = new THREE.AmbientLight(0x444444);//创建一个环境光
scene.add(ambient);//向场景中添加环境光
let camera = new THREE.OrthographicCamera(-200*window.innerWidth/window.innerHeight,200*window.innerWidth/window.innerHeight,200,-200,1,1000);
//创建一个相机
camera.position.set(100,40,100);//设置相机的位置
camera.lookAt(scene.position);//设置相机拍摄的位置；
let renderer = new THREE.WebGLRenderer();//创建一个渲染器
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0xb9d3ff,1);
document.body.appendChild(renderer.domElement);
function rend(){
renderer.render(scene,camera);
}
rend()
let constrol = new THREE.OrbitControls(camera,renderer.domElement);
constrol.addEventListener('change',rend);
