您的位置:首页 > 编程语言

第二次修改代码加入了光源材质变得酷炫了哟没有

2016-11-13 09:24 176 查看
/**
* Created by 12204 on 2016/11/12.
*/
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.setClearColorHex();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;//告诉渲染器我需要影子

// 把坐标轴显示出来
var axes = new THREE.AxisHelper(20);
scene.add(axes);

// 创建一个平面
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});//新的材质对光源有反应
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;//我接受影子照在我身上
//旋转平面的位置因为默认是与x轴平行的
plane.rotation.x = 1.5 * Math.PI;//-1.5到到0.5其实是一样的反向的问题
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;

// 添加到场景中去
scene.add(plane);

// 创建一个方块
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;//方块需要影子

// 方块的位置
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;

// 将它添加到场景中去
scene.add(cube);

// 创建一个球球
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true;//球球也要

// 球球的位置·
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;

//添加一个球球
scene.add(sphere);

// 相机放在哪里其实就是从哪个位置看
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);

// 添加光照效果但是没有材质的话没啥区别
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);

// 获取上下问创建一个渲染的位置
document.getElementById("WebGL-output").appendChild(renderer.domElement);

//渲染场景
renderer.render(scene, camera);
}
window.onload = init;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  three.js
相关文章推荐