當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

刚学了一个炫酷3D三棱锥立体特效，快来看看

發布時間：2024/3/12 编程问答 48 豆豆

生活随笔收集整理的這篇文章主要介紹了刚学了一个炫酷3D三棱锥立体特效，快来看看小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄標題

演示
技術棧
源碼
- - css部分
  - js部分
點擊直接資料領取

演示

技術棧

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

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

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

一個小案例

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>第一個three.js文件_WebGL三維場景</title><style>body {margin: 0;overflow: hidden;/* 隱藏body窗口區域滾動條 */}</style><script src="js/three/build/three.js"></script> </head><body><script>/*** 創建場景對象Scene*/var scene = new THREE.Scene();/*** 創建網格模型*/// var geometry = new THREE.SphereGeometry(60, 40, 40); //創建一個球體幾何對象var geometry = new THREE.BoxGeometry(100, 100, 100); //創建一個立方體幾何對象Geometryvar material = new THREE.MeshLambertMaterial({color: 0x0000ff}); //材質對象Materialvar mesh = new THREE.Mesh(geometry, material); //網格模型對象Meshscene.add(mesh); //網格模型添加到場景中/*** 光源設置*///點光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300); //點光源位置scene.add(point); //點光源添加到場景中//環境光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; //三維場景顯示范圍控制系數，系數越大，顯示的范圍越大//創建相機對象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(200, 300, 200); //設置相機位置camera.lookAt(scene.position); //設置相機方向(指向的場景對象)/*** 創建渲染器對象*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);//設置渲染區域尺寸renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色document.body.appendChild(renderer.domElement); //body元素中插入canvas對象//執行渲染操作指定場景、相機作為參數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部分

點擊直接資料領取

如果你在學習python或者Java哪怕是C遇到問題都可以來給我留言，因為在學習初期新手總會走很多彎路，這個時候如果沒有有個人來幫一把的話很容易就放棄了。身邊很多這樣的例子許多人學著學著就轉了專業換了方向，不僅是自身問題還是沒有正確的學習。所以作為一個過來人我希望有問題給我留言，說不上是幫助就是順手敲幾行字的事情。

這里有python，Java學習資料還有有有趣好玩的編程項目，更有難尋的各種資源。反正看看也不虧。

總結

以上是生活随笔為你收集整理的刚学了一个炫酷3D三棱锥立体特效，快来看看的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ZCMU - 1601: 卡斯丁狗去挖矿
下一篇：在线学习(Online learning