Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。本文将用Three.js实现3D三棱锥立体特效，感兴趣的可以了解一下
演示
技术栈
3D特效的话最容易让人想到的应该是three.js吧。我们今天来说说它。
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
Threejs是一款WebGL三维引擎，它可以用来做什么许多许多地场景应用
一个小案例
第一个three.js文件_WebGL三维场景
源码
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; ip = [ [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实现3D三棱锥立体特效的详细内容，更多关于Three.js 3D三棱锥立体特效的资料请关注0133技术站其它相关文章！
以上就是利用Three.js实现3D三棱锥立体特效的详细内容，更多请关注0133技术站其它相关文章！
