2. 程式人生 > >47 Three.js使用THREE.ParametricGeometry生成平面圖形、波浪圖形、和克萊因瓶

47 Three.js使用THREE.ParametricGeometry生成平面圖形、波浪圖形、和克萊因瓶

阿新 • • 發佈：2019-02-15
var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias:true}); //renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //設定背景顏色 renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } var
camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); camera.position.set(0, 0, 150); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { scene.add(new
THREE.AmbientLight(0x404040)); light = new THREE.DirectionalLight(0xffffff); light.position.set(1,1,1); scene.add(light); } //建立平面模型的方法 var plane = function (u, v) { var x = u*50; var y = 0; var z = v*50; return new THREE.Vector3(x, y, z); }; //建立波浪圖形的方法
var radialWave = function (u, v) { var r = 50; var x = Math.sin(u) * r; var z = Math.sin(v / 2) * 2 * r; var y = (Math.sin(u * 4 * Math.PI) + Math.cos(v * 2 * Math.PI)) * 2.8; return new THREE.Vector3(x, y, z); }; var klein = function (u, v) { u *= Math.PI; v *= 2 * Math.PI; u = u * 2; var x, y, z; if (u < Math.PI) { x = 3 * Math.cos(u) * (1 + Math.sin(u)) + (2 * (1 - Math.cos(u) / 2)) * Math.cos(u) * Math.cos(v); z = -8 * Math.sin(u) - 2 * (1 - Math.cos(u) / 2) * Math.sin(u) * Math.cos(v); } else { x = 3 * Math.cos(u) * (1 + Math.sin(u)) + (2 * (1 - Math.cos(u) / 2)) * Math.cos(v + Math.PI); z = -8 * Math.sin(u); } y = -2 * (1 - Math.cos(u) / 2) * Math.sin(v); return new THREE.Vector3(x, y, z); }; function initModel() { //軸輔助 （每一個軸的長度） object = new THREE.AxisHelper( 50 ); scene.add( object ); var mesh = createMesh(new THREE.ParametricGeometry(klein, 12, 12)); scene.add(mesh); } //生成模型 function createMesh(geom) { //設定當前的模型矩陣沿xy軸偏移，讓圖片處於顯示中心 geom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 0)); // 建立法向量紋理 var meshMaterial = new THREE.MeshNormalMaterial({ flatShading: THREE.FlatShading, transparent: true, opacity: 0.9 }); // 建立一個線框紋理 var wireFrameMat = new THREE.MeshBasicMaterial(); wireFrameMat.wireframe = true; // 建立模型 var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial,wireFrameMat]); return mesh; } //初始化效能外掛 var stats; function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } //使用者互動外掛 滑鼠左鍵按住旋轉，右鍵按住平移，滾輪縮放 var controls; function initControls() { controls = new THREE.OrbitControls( camera, renderer.domElement ); // 如果使用animate方法時，將此函式刪除 //controls.addEventListener( 'change', render ); // 使動畫迴圈使用時阻尼或自轉 意思是否有慣性 controls.enableDamping = true; //動態阻尼係數 就是滑鼠拖拽旋轉靈敏度 //controls.dampingFactor = 0.25; //是否可以縮放 controls.enableZoom = true; //是否自動旋轉 controls.autoRotate = false; //設定相機距離原點的最遠距離 controls.minDistance = 20; //設定相機距離原點的最遠距離 controls.maxDistance = 10000; //是否開啟右鍵拖拽 controls.enablePan = true; } //生成gui設定配置項 var gui; function initGui() { //宣告一個儲存需求修改的相關資料的物件 gui = {}; var datGui = new dat.GUI(); //將設定屬性新增到gui當中，gui.add(物件，屬性，最小值，最大值） //呼叫生成一次圖形 gui.asGeom(); } function render() { renderer.render( scene, camera ); } //視窗變動觸發的函式 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); render(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { //更新控制器 controls.update(); render(); //更新效能外掛 stats.update(); requestAnimationFrame(animate); } function draw() { initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); initStats(); //initGui(); animate(); window.onresize = onWindowResize; }

相關推薦

47 Three.js使用THREE.ParametricGeometry生成平面圖形、波浪圖形、和克萊因瓶

var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias:true}); //renderer.setClearColor(new THREE.Col

在word中，怎麼插入一條水平線、粗線、波浪線、雙直線、虛線 -------自動邊框線

生成在編輯文件時，出於美觀和醒目的需要，有時需要為文件新增一些分割線，如果利用特殊符號來輸入，則可以達到事半功倍的效果。如果你需要繪製雙直線，只要連續輸入三個或者三個以上的“＝” ，然後回車，雙直線就自動生成了；如果你需要繪製波浪線，只要連續輸入三個或者三個以上的“～” ，然後回車，波浪線就自動生成了；如果你

【計算機圖形學】二、橢圓的生成

1. 演算法 2. 原始碼 #include "stdafx.h" #include "GL/glut.h" #include "stdlib.h" void init() { glClearColor(1.0,1.0,1.0,0.0); glMatri

PHP.25-TP框架商城應用實例-後臺1-添加商品功能、鉤子函數、在線編輯器、過濾XSS、上傳圖片並生成縮略圖

引用傳遞 none move 名稱 textarea 如果 library time fields 添加商品功能 　　1、創建商品控制器【C】　　/www.test.com/shop/Admin/Controller/GoodsController.class.php

Python學習心得(五) random生成驗證碼、MD5加密、pickle與json的序列化和反序列化

用法 div com ict file imp randint csdn == # -*- coding:utf-8 -*- import random as rd #驗證碼 import hashlib as hsl #MD5加密 import pickle,json

將音樂生成波浪圖形，JavaScript Html5

生成 ges targe .cn 最好 you html logs image x 省略廢話(N+1)... Windows Media Palyer中的經典波浪形 自己也行動手做一個，最好是JavaScript實現的， 搜索到了資源部分關鍵詞"HTML5 頻譜

Nginx負載均衡、ssl原理、生成ssl密鑰對、Nginx配置ssl

lnmp架構Nginx負載均衡當用戶訪問nginx定制好的域名時，nginx通過轉發到幾臺真實的站點，通過upstream實現[root@centos7 vhost]# vim /usr/local/nginx/conf/vhost/load.confupstream www.tt.com#自定義域名{#

Java基礎------生成一個六位數的驗證碼（包含大寫字母、小寫字母、數字，並且不允許重復）？

參考 數組 rand 定義 ole ava length log post 問題描述：生成一個六位數的驗證碼（包含大寫字母、小寫字母、數字，並且不允許重復）？ 參考代碼如下： import java.util.Arrays;import java.util.Random

linux的Nginx負載均衡、ssl原理、生成ssl密鑰對、Nginx配置ssl介紹

block server u tlsv1 host fda 彈出 配置ssl 重新編譯 openssl Nginx的負載均衡 1. 查找www.qq.com域名對應IP做測試 [root@gary-tao ~]# yum install -y bind-utils /

zabbix的主動模式和被動模式、添加監控主機、添加自定義模板、處理圖形中的亂碼、自動發現

roo 清理 瀏覽器 間隔 原型 fin 監測 9.png sim 主動模式和被動模式 主動或者被動是相對客戶端來講的 被動模式，服務端會主動連接客戶端獲取監控項目數據，客戶端被動地接受連接，並把監控信息傳遞給服務端 主動模式，客戶端會主動把監控數據匯報給服務端，服務

獎討論】AI、AR、物聯網、圖形圖...[高通]

z5z icc .cn qss www. mys log pos cnblogs bvdlth禾馴夷卻時狄http://www.58pic.com/c/12201501tz5z5b咕蜒侄範陜前http://www.58pic.com/c/122016674k4ceo凹址鈣上

數學-線性代數導論-#11 基於矩陣A生成的空間：列空間、行空間、零空間、左零空間

strong pos div 直接 jpg 不能 多次 常見 變化 線性代數導論-#11 基於矩陣A生成的空間：列空間、行空間、零空間、左零空間 本節課介紹和進一步總結了如何求出基於一個m*n矩陣A生成的四種常見空間的維數和基： 列空間C(A)，dim C(A) =

數據輸入——生成你需要的echart圖(堆積柱狀圖、扇形圖、嵌套環形圖)

wid html 矩形 lan class nes bar target AC 最近論文需要一些比較直觀的圖表， 發現echart做出來的圖還是比較美觀的，這裏介紹如何修改數據生成你需要的echart圖。 1.堆積柱狀圖： http://echarts.baidu.com/

python—day14內置函數2、列表生成式與生成器表達式、模塊

left with open 列表生成式 表達式 兩件 style pytho per 數據 內置函數2、列表生成式與生成器表達式、模塊 內置函數2： 1 # pow(x,y,z) x，y，z x的y次方除於z 得出的結果是除數和余數 2 print(pow

linux監控平臺搭建(2)主動和被動模式、添加監控主機、添加自定義模板、處理圖形亂碼、自動發現

添加監控主機 主動和被動模式 添加主機添加主機：1.添加主機群組：2.添加主機：點擊主機-->創建主機(1)應用集：是監控項的集合（如：cpu的集合，內存的集合）(2)監控項：監控的項目（cpu,內存）(3)觸發器：對監控項設定的告警規則，和告警級別。(4)圖形

使用keytool生成公鑰、私鑰、證書並且讀取出來，使用私鑰簽名jar並驗證（轉）

工具 crypto upload () 結構 清單文件 style too ref 參考鏈接：http://happyqing.iteye.com/blog/2139504 　　　　：https://blog.csdn.net/arjelarxfc/article/det

五十、Nginx負載均衡、SSL原理、生成SSL密鑰對、Nginx配置SSL

Nginx負載均衡 SSL原理 生成SSL密鑰對 Nginx配置SSL 五十、Nginx負載均衡、ssl原理、生成ssl密鑰對、Nginx配置ssl一、Nginx負載均衡代理一臺機器叫代理，代理兩臺機器就可以叫負載均衡。 代理服務器後有多個web服務器提供服務的時候，就可以實現負載均衡

50.Nginx負載均衡、ssl原理、生成ssl密鑰對、Nginx配置ssl

Nginx負載均衡 ssl原理、 生成ssl密鑰對 Nginx配置ssl 一、Nginx負載均衡 dig www.qq.com curl -x127.0.0.1:80 www.qq.com vim /usr/local/nginx/conf/vhost/load.conf // 寫入

R: matrix & array 生成、操作矩陣、數組：

得到 其中 證明 nbsp 循環 sum 問題： 三維 AS ################################################### 問題：生成、操作矩陣 18.4.27 怎麽生成矩陣 matrix、，，及其相關操作 ？

六十五、主動模式和被動模式、添加監控主機、添加自定義模板、處理圖形中的亂碼、自動發現

監控主機 自定義模板 圖形亂碼 自動發現 六十五、主動模式和被動模式、添加監控主機、添加自定義模板、處理圖形中的亂碼、自動發現一、主動模式和被動模式主動或者被動是相對客戶端來講的被動模式，服務端會主動連接客戶端獲取監控項目數據，客戶端被動地接受連接，並把監控信息傳遞給服務端主動模式，客戶端會主