纪念碑谷恶搞模型
效果展示
部分代码
.js
var container = document. getElementById ( 'container' ) ;
if ( ! Detector. webgl ) Detector. addGetWebGLMessage ( ) ;
var renderer, scene, camera;
var origin = new THREE. Vector3 ( ) ;
var head, hat, bod, body, letf1, letfleg, right1, rightleg;
var rectLight;
var rectLightMesh;
var mshStdBox;
var param = { } ;
var mshStdKnot;
init ( ) ;
animate ( ) ;
function init ( ) {
renderer = new THREE. WebGLRenderer ( { antialias: true } ) ;
renderer. setPixelRatio ( window. devicePixelRatio ) ;
renderer. setSize ( window. innerWidth, window. innerHeight ) ;
renderer. shadowMap. enabled = true ;
renderer. shadowMap. type = THREE . PCFSoftShadowMap;
renderer. gammaInput = true ;
renderer. gammaOutput = true ;
document. body. appendChild ( renderer. domElement ) ;
var gl = renderer. context;
if ( ! gl. getExtension ( 'OES_texture_float' ) ) {
alert ( 'OES_texture_float not supported' ) ;
throw 'missing webgl extension' ;
}
if ( ! gl. getExtension ( 'OES_texture_float_linear' ) ) {
alert ( 'OES_texture_float_linear not supported' ) ;
throw 'missing webgl extension' ;
}
camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 20 , 35 ) ;
scene = new THREE. Scene ( ) ;
var ambient = new THREE. AmbientLight ( 0xffffff , 0.1 ) ;
scene. add ( ambient ) ;
rectLight = new THREE. RectAreaLight ( 0xffffff , 1 , 10 , 10 ) ;
rectLight. position. set ( 5 , 5 , 0 ) ;
scene. add ( rectLight ) ;
rectLightMesh = new THREE. Mesh ( new THREE. PlaneBufferGeometry ( ) , new THREE. MeshBasicMaterial ( ) ) ;
rectLightMesh. scale. x = rectLight. width;
rectLightMesh. scale. y = rectLight. height;
rectLight. add ( rectLightMesh ) ;
var rectLightMeshBack = new THREE. Mesh ( new THREE. PlaneBufferGeometry ( ) , new THREE. MeshBasicMaterial ( { color: 0x080808 } ) ) ;
rectLightMeshBack. rotation. y = Math. PI ;
rectLightMesh. add ( rectLightMeshBack ) ;
var geoFloor = new THREE. BoxGeometry ( 2000 , 0.1 , 2000 ) ;
var matStdFloor = new THREE. MeshStandardMaterial ( { color: 0x808080 , roughness: 0 , metalness: 0 } ) ;
var mshStdFloor = new THREE. Mesh ( geoFloor, matStdFloor ) ;
scene. add ( mshStdFloor ) ;
var matStdObjects = new THREE. MeshStandardMaterial ( { color: 0xffffff , roughness: 0 , metalness: 0 } ) ;
var geometry = new THREE. SphereGeometry ( 1 , 40 , 40 ) ;
var material0 = new THREE. MeshLambertMaterial ( {
color: 0x000000 , roughness: 0 , metalness: 0
} ) ;
head = new THREE. Mesh ( geometry, material0) ;
head. position. set ( 0 , 7 , 0 ) ;
head. castShadow = true ;
head. receiveShadow = true ;
scene. add ( head) ;
var geometry1 = new THREE. ConeGeometry ( 1.0 , 4 , 32 ) ;
hat = new THREE. Mesh ( geometry1, matStdObjects) ;
hat. position. set ( 0 , 8.8 , 1 ) ;
hat. rotateX ( Math. PI / 6 ) ;
scene. add ( hat) ;
var geometry2 = new THREE. ConeGeometry ( 1.7 , 4.5 , 32 ) ;
body = new THREE. Mesh ( geometry2, matStdObjects) ;
body. position. set ( 0 , 4.1 , 0 ) ;
scene. add ( body) ;
var geometry3 = new THREE. CylinderGeometry ( 0.25 , 0.2 , 2.01 , 8 ) ;
letfleg = new THREE. Mesh ( geometry3, matStdObjects) ;
letfleg. position. set ( 0.5 , 1 , 0 ) ;
scene. add ( letfleg) ;
rightleg = new THREE. Mesh ( geometry3, matStdObjects) ;
rightleg. position. set ( - 0.5 , 1 , 0 ) ;
scene. add ( rightleg) ;
var geometry4 = new THREE. CylinderGeometry ( 0.2 , 0.2 , 1 , 32 ) ;
var material4 = new THREE. MeshBasicMaterial ( { color: 0x000000 } ) ;
bod = new THREE. Mesh ( geometry4, material4) ;
bod. position. set ( 0 , 5.8 , 0 ) ;
scene. add ( bod) ;
var geometry5 = new THREE. CylinderGeometry ( 0.2 , 0.25 , 0.5 , 32 ) ;
var material5 = new THREE. MeshBasicMaterial ( { color: 0x000000 } ) ;
letf1 = new THREE. Mesh ( geometry5, material5) ;
letf1. position. set ( 0.5 , 0.26 , 0 ) ;
scene. add ( letf1) ;
right1 = new THREE. Mesh ( geometry5, material5) ;
right1. position. set ( - 0.5 , 0.26 , 0 ) ;
scene. add ( right1) ;
var geometry5 = new THREE. CylinderGeometry ( 0.25 , 0.5 , 5 , 8 ) ;
letf2 = new THREE. Mesh ( geometry5, matStdObjects) ;
letf2. position. set ( 2.5 , 5 , 0 ) ;
letf2. rotateY ( Math. PI / 2 ) ;
letf2. rotateX ( Math. PI / 2 ) ;
scene. add ( letf2) ;
right2 = new THREE. Mesh ( geometry5, matStdObjects) ;
right2. position. set ( - 2.5 , 5 , 0 ) ;
right2. rotateY ( Math. PI / 2 ) ;
right2. rotateX ( Math. PI * 3 / 2 ) ;
scene. add ( right2) ;
const texture = new THREE. TextureLoader ( ) . load ( "8.jpg" ) ;
texture. wrapS = THREE . RepeatWrapping;
texture. wrapT = THREE . RepeatWrapping;
texture. repeat. set ( 1 , 1 ) ;
var material6 = new THREE. MeshBasicMaterial ( { color: 0x000000 , map: texture} ) ;
var geoSphere = new THREE. SphereGeometry ( 1.5 , 32 , 32 ) ;
var mshStdSphere = new THREE. Mesh ( geoSphere, material6 ) ;
mshStdSphere. position. set ( - 5 , 5 , 0 ) ;
mshStdSphere. castShadow = true ;
mshStdSphere. receiveShadow = true ;
scene. add ( mshStdSphere ) ;
var geometry = new THREE. DodecahedronGeometry ( 1.5 ) ;
mshStdKnot = new THREE. Mesh ( geometry, matStdObjects ) ;
mshStdKnot. position. set ( 5 , 5 , 0 ) ;
mshStdKnot. castShadow = true ;
mshStdKnot. receiveShadow = true ;
scene. add ( mshStdKnot ) ;
var controls = new THREE. OrbitControls ( camera, renderer. domElement ) ;
controls. target. copy ( head. position ) ;
controls. update ( ) ;
var gui = new dat. GUI ( { width: 300 } ) ;
gui. open ( ) ;
param = {
motion: true ,
width: rectLight. width,
height: rectLight. height,
color: rectLight. color. getHex ( ) ,
intensity: rectLight. intensity,
'ambient' : ambient. intensity,
'floor color' : matStdFloor. color. getHex ( ) ,
'object color' : matStdObjects. color. getHex ( ) ,
'roughness' : matStdFloor. roughness,
'metalness' : matStdFloor. metalness
} ;
gui. add ( param, 'motion' ) ;
var lightFolder = gui. addFolder ( 'Light' ) ;
lightFolder. add ( param, 'width' , 1 , 20 ) . step ( 0.1 ) . onChange ( function ( val ) {
rectLight. width = val;
rectLightMesh. scale. x = val;
} ) ;
lightFolder. add ( param, 'height' , 1 , 20 ) . step ( 0.1 ) . onChange ( function ( val ) {
rectLight. height = val;
rectLightMesh. scale. y = val;
} ) ;
lightFolder. addColor ( param, 'color' ) . onChange ( function ( val ) {
rectLight. color. setHex ( val ) ;
rectLightMesh. material. color. copy ( rectLight. color ) . multiplyScalar ( rectLight. intensity ) ;
} ) ;
lightFolder. add ( param, 'intensity' , 0.0 , 4.0 ) . step ( 0.01 ) . onChange ( function ( val ) {
rectLight. intensity = val;
rectLightMesh. material. color. copy ( rectLight. color ) . multiplyScalar ( rectLight. intensity ) ;
} ) ;
lightFolder. add ( param, 'ambient' , 0.0 , 0.2 ) . step ( 0.01 ) . onChange ( function ( val ) {
ambient. intensity = val;
} ) ;
lightFolder. open ( ) ;
var standardFolder = gui. addFolder ( 'Standard Material' ) ;
standardFolder. addColor ( param, 'floor color' ) . onChange ( function ( val ) {
matStdFloor. color. setHex ( val ) ;
} ) ;
standardFolder. addColor ( param, 'object color' ) . onChange ( function ( val ) {
matStdObjects. color. setHex ( val ) ;
} ) ;
standardFolder. add ( param, 'roughness' , 0.0 , 1.0 ) . step ( 0.01 ) . onChange ( function ( val ) {
matStdObjects. roughness = val;
matStdFloor. roughness = val;
} ) ;
standardFolder. add ( param, 'metalness' , 0.0 , 1.0 ) . step ( 0.01 ) . onChange ( function ( val ) {
matStdObjects. metalness = val;
matStdFloor. metalness = val;
} ) ;
standardFolder. open ( ) ;
window. addEventListener ( 'resize' , onResize, false ) ;
}
function onResize ( ) {
renderer. setSize ( window. innerWidth, window. innerHeight ) ;
camera. aspect = ( window. innerWidth / window. innerHeight ) ;
camera. updateProjectionMatrix ( ) ;
}
function animate ( ) {
requestAnimationFrame ( animate ) ;
if ( param. motion ) {
var t = ( Date. now ( ) / 2000 ) ;
var r = 15.0 ;
var lx = r * Math. cos ( t ) ;
var lz = r * Math. sin ( t ) ;
var ly = 5.0 + 5.0 * Math. sin ( t / 3.0 ) ;
rectLight. position. set ( lx, ly, lz ) ;
rectLight. lookAt ( origin ) ;
head. rotateY ( 0.001 * t) ; hat. rotateY ( 0.001 * t) ;
bod. rotateY ( 0.001 * t) ;
body. rotateY ( 0.001 * t) ;
letf1. rotateY ( 0.001 * t) ;
letfleg. rotateY ( 0.001 * t) ;
right1. rotateY ( 0.001 * t) ;
rightleg. rotateY ( 0.001 * t) ;
mshStdKnot. rotateY ( 0.001 * t) ;
}
renderer. render ( scene, camera ) ;
}
.html
< ! DOCTYPE html>
< html lang= "en" >
< head>
< title> 纪念< / 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 {
background- color: #000 ;
margin: 0 px;
overflow: hidden;
}
#info {
position: absolute;
top: 0 px; width: 100 % ;
color: #ffffff;
padding: 5 px;
font- family: Monospace;
font- size: 13 px;
text- align: center;
}
a {
color: #ff0080;
text- decoration: none;
}
a: hover {
color: #0080 ff;
}
< / style>
< / head>
< body>
< div id= "container" > < / div>
< script src= "../Common/three.js" > < / script>
< script src= "../Common/RectAreaLightUniformsLib.js" > < / script>
< script src= "../Common/OrbitControls.js" > < / script>
< script src= "../Common/dat.gui.min.js" > < / script>
< script src= "../Common/stats.min.js" > < / script>
< script src= "../Common/Detector.js" > < / script>
< script src= "11.js" > < / script>
< / body>
< / html>