<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.js从入门到精通系列教程030 - three.js创建五彩斑斓的旋转立方体</title>
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script id="myVertexShader" type="x-shader/x-vertex">
//创建顶点着色器
varying vec2 vUv;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
//创建片元着色器
uniform float time;
uniform vec2 resolution;
varying vec2 vUv;
void main( void ) {
vec2 position = -1.0 + 2.0 * vUv;
float red = abs( sin( position.x * position.y + time / 5.0 ) );
float green = abs( sin( position.x * position.y + time / 4.0 ) );
float blue = abs( sin( position.x * position.y + time / 3.0 ) );
gl_FragColor = vec4( red, green, blue, 1.0 );
}
</script>
<script type="text/javascript">
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({ antialias: true });
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
$('#myContainer')[0].appendChild(myRenderer.domElement);
var myScene = new THREE.Scene();
var myCamera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 10, 130);
myCamera.position.x = 30;
myCamera.position.y = 30;
myCamera.position.z = 30;
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
//创建THREE.ShaderMaterial
var myShaderMaterial = new THREE.ShaderMaterial({
uniforms: {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() },
},
vertexShader: $('#myVertexShader')[0].textContent,
fragmentShader: $('#myFragmentShader')[0].textContent
});
//使用THREE.ShaderMaterial创建立方体
var myBoxGeometry = new THREE.BoxGeometry(16, 16, 16);
var myMesh = new THREE.Mesh(myBoxGeometry, myShaderMaterial);
myScene.add(myMesh);
var myStep = 0;
//渲染(旋转)立方体
animate();
function animate() {
myMesh.rotation.y = myStep += 0.01;
myMesh.rotation.x = myStep;
myMesh.rotation.z = myStep;
myMesh.material.uniforms.time.value += 0.1;
requestAnimationFrame(animate);
myRenderer.render(myScene, myCamera);
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
