代碼儘可能簡單，方便初學者使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/three.min.js"></script>
<script src="../js/OrbitControls.js"></script> <!--引入控制js，可以旋轉視角-->
<link rel="stylesheet" href="../css/common.css">
</head>
<body>
<div class="ys-absolute-container" id="box" style="overflow: hidden"></div>
<script src="../js/init_bak.js"></script>
<script>
let ele=document.getElementById('box')
let app=new viewer(ele,{})
let scene=app.scene
let camera=app.camera
let renderer=app.renderer
//座標軸輔助
var axes = new THREE.AxesHelper(10); //紅x 綠y 藍z
scene.add(axes);
//通過SpotLight創建一個光源
const spotLight = new THREE.SpotLight(0xffffff);
//從-40,60,-10這個三維座標處照射我們的場景
spotLight.position.set(-40, 60, -10);
//添加光源到場景
scene.add(spotLight);
//添加環境光
var ambientLight = new THREE.AmbientLight("#FFB6C1", 1);
scene.add(ambientLight);
var geometry= new THREE.BoxGeometry(2,2,2)
//geometry.faceVertexUvs 可以查看面紋理座標的個數--也就是三角形的個數
let v=` uniform float time;
varying vec2 vUv;
void main()
{
vec3 posChanged = position; //默認爲(geometry傳入的座標)
//默認的座標要在前面乘模型視圖矩陣和投影矩陣纔會正常顯示
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}`
let f=`precision highp float;
uniform float time;
uniform vec2 resolution;
varying vec2 vUv;
void main(void)
{
vec2 uv = ( gl_FragCoord.xy / resolution.xy );
vec3 col = 0.5 + 0.5*cos(uv.xyx+vec3(0,2,4)); //由於resolution太大，導致沒有效果
// Output to screen
gl_FragColor = vec4(col,1.0);
}
`
var uniforms = {
resolution: {
type: "v2",
value: new THREE.Vector2()
}
};
uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;
let mat=[]
var meshMaterial
meshMaterial= new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: v,
fragmentShader: f,
transparent: true,
side:THREE.DoubleSide,//兩面可見
});
mat.push(meshMaterial)
mat.push(meshMaterial)
mat.push(meshMaterial)
// mat.push(meshMaterial)
// mat.push(meshMaterial)
// mat.push(meshMaterial)
var box = new THREE.Mesh(
geometry,
mat,//當mat爲矩陣的時候，會索引設置geometry的材質，如果一個，則全部的材質都爲同一個
//meshMaterial
);
scene.add(box)
renderer.render( scene, camera );
</script>
</body>
</html>