利用Three.js實現(xiàn)3D三棱錐立體特效

更新時間：2022年06月21日 08:21:56 作者：肥學

Three.js是基于原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。本文將用Three.js實現(xiàn)3D三棱錐立體特效，感興趣的可以了解一下

演示

技術(shù)棧

3D特效的話最容易讓人想到的應該是three.js吧。我們今天來說說它。

Three.js是基于原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。

Threejs是一款WebGL三維引擎，它可以用來做什么許多許多地場景應用

一個小案例

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>第一個three.js文件_WebGL三維場景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隱藏body窗口區(qū)域滾動條 */
    }
  </style>
  <!--引入three.js三維引擎-->
  <!-- <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>-->
  <script src="js/three/build/three.js"></script>
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
 
<body>
  <script>
    /**
     * 創(chuàng)建場景對象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 創(chuàng)建網(wǎng)格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //創(chuàng)建一個球體幾何對象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材質(zhì)對象Material
    var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Mesh
    scene.add(mesh); //網(wǎng)格模型添加到場景中
    /**
     * 光源設置
     */
    //點光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //點光源位置
    scene.add(point); //點光源添加到場景中
    //環(huán)境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相機設置
     */
    var width = window.innerWidth; //窗口寬度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口寬高比
    var s = 200; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大
    //創(chuàng)建相機對象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //設置相機位置
    camera.lookAt(scene.position); //設置相機方向(指向的場景對象)
    /**
     * 創(chuàng)建渲染器對象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//設置渲染區(qū)域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas對象
    //執(zhí)行渲染操作   指定場景、相機作為參數(shù)
    renderer.render(scene, camera);
  </script>
</body>
</html>

源碼

css部分

body{
  overflow: hidden;
  margin:0;
}
canvas{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}

js部分

var w = window.innerWidth, h = window.innerHeight;
window.onresize = function(){
  var w = window.innerWidth, h = window.innerHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize( w, h );
}

cameraSpeed = .0003;
lightSpeed = .001;
tubularSegments = 1000;
radialSegments = 3;
tubeRadius = 2;
lightColor = 0xffffff;
lightIntensity = 1;
lightDistance = 20;

var renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("canvas"),
  antialias: true,
});
renderer.setSize(w, h);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, w / h, .001, 1000);

var starsGeometry = new THREE.Geometry();
for(i=0; i<3000; i++){
	var star = new THREE.Vector3();
	star.x = THREE.Math.randFloatSpread(1500);
	star.y = THREE.Math.randFloatSpread(1500);
	star.z = THREE.Math.randFloatSpread(1500);
	starsGeometry.vertices.push(star);
}
var starsMaterial = new THREE.PointsMaterial({color: 0xffffff});
var starField = new THREE.Points(starsGeometry,starsMaterial);
scene.add(starField);

for (i=0; i<p.length; i++) {
  var x = p[i][0];
  var y = p[i][2];
  var z = p[i][1];
  p[i] = new THREE.Vector3(x,y,z);
}
var path = new THREE.CatmullRomCurve3(p);
var geometry = new THREE.TubeGeometry(path,tubularSegments,tubeRadius,radialSegments,true);

for(i=0; i<geometry.faces.length; i++){
  geometry.faces[i].color = new THREE.Color("hsl("+i/2+",100%,50%)");
}

var material = new THREE.MeshLambertMaterial({
  side: THREE.BackSide,
  vertexColors: THREE.FaceColors,
  wireframe: true
});

var tube = new THREE.Mesh(geometry, material);
scene.add(tube);

var light = new THREE.PointLight(0xffffff, 1, 50);
scene.add(light);
var light2 = new THREE.AmbientLight(0x222222);
scene.add(light2);

var l1 = new THREE.PointLight(lightColor, lightIntensity, lightDistance);
scene.add(l1);
var l2 = new THREE.PointLight(lightColor, lightIntensity, lightDistance);
scene.add(l2);
var l3 = new THREE.PointLight(lightColor, lightIntensity, lightDistance);
scene.add(l3);
var l4 = new THREE.PointLight(lightColor, lightIntensity, lightDistance);
scene.add(l4);
var l5 = new THREE.PointLight(lightColor, lightIntensity, lightDistance);
scene.add(l5);

var pct = 0;
var pct2 = 0;
function render(){
  pct += cameraSpeed
  pct2 += lightSpeed;
  var pt1 = path.getPointAt(pct%1);
  var pt2 = path.getPointAt((pct + .01)%1);
  camera.position.set(pt1.x,pt1.y,pt1.z);
  camera.lookAt(pt2);
  light.position.set(pt2.x, pt2.y, pt2.z);
  
  l1.position.set(path.getPointAt((pct2+.0)%1).x, path.getPointAt((pct2+.0)%1).y, path.getPointAt((pct2+.0)%1).z);
  l2.position.set(path.getPointAt((pct2+.2)%1).x, path.getPointAt((pct2+.2)%1).y, path.getPointAt((pct2+.2)%1).z);
  l3.position.set(path.getPointAt((pct2+.4)%1).x, path.getPointAt((pct2+.4)%1).y, path.getPointAt((pct2+.4)%1).z);
  l4.position.set(path.getPointAt((pct2+.6)%1).x, path.getPointAt((pct2+.6)%1).y, path.getPointAt((pct2+.6)%1).z);
  l5.position.set(path.getPointAt((pct2+.8)%1).x, path.getPointAt((pct2+.8)%1).y, path.getPointAt((pct2+.8)%1).z);
  
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

p = [
	[389,246,0],
  [410,255,20],
  [413,268,7],
  [431,261,12],
  [418,244,30],
  [416,217,25],
  [420,205,8],
  [427,227,-20],
  [432,236,5],
  [444,228,12],
  [451,232,41],
  [446,246,72],
  [443,264,96],
  [446,278,65],
  [463,267,20],
  [460,258,-10],
  [464,243,-20],
  [459,233,0],
  [475,225,22],
  [484,225,29],
  [490,214,51],
  [476,202,55],
  [462,202,55],
  [446,205,42],
  [440,192,42],
  [430,183,72],
  [413,184,58],
  [406,191,32],
  [406,207,0],
  [402,220,0],
  [390,222,20],
  [385,228,10],
  [389,246,0]
];

以上就是利用Three.js實現(xiàn)3D三棱錐立體特效的詳細內(nèi)容，更多關(guān)于Three.js 3D三棱錐立體特效的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: