2022-04-09_Three.js在專案中的引用
阿新 • • 發佈:2022-04-09
Three.js在專案中的引用
傳統靜態頁面引入Three.js
這裡使用npm引入Three.js。
npm init
然後需要在package.json中定義:
"dependencies": {
"three": "^0.137.5"
},
繼而,
npm install three
然後在我們的靜態檔案中test001.html,如下編寫:
<!DOCTYPE html> <html lang="en"> <head> <title>三維介面及管道</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> </head> <body> <script type="importmap"> { "imports": { "three": "../node_modules/three/build/three.module.js" } } </script> <script type="module"> import * as THREE from '../node_modules/three/build/three.module.js'; import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js"; import { FontLoader } from '../node_modules/three/examples/jsm/loaders/FontLoader.js'; import { TextGeometry } from '../node_modules/three/examples/jsm/geometries/TextGeometry.js'; var scene = new THREE.Scene(); //建立管道成型的路徑(3D樣條曲線) var path = new THREE.CatmullRomCurve3([ new THREE.Vector3(-100, -50, -50), new THREE.Vector3(100, 50, 0), new THREE.Vector3(80, 50, 50), new THREE.Vector3(-50, 0, 100) ]); // path:路徑 40:沿著軌跡細分數 20:管道半徑 25:管道截面圓細分數 var geometry = new THREE.TubeGeometry(path, 40, 20, 25); console.log(geometry); //材質物件 var material = new THREE.LineBasicMaterial({ color: 0x000000 }); //線條模型物件 var line = new THREE.Line(geometry, material); scene.add(line); //線條物件新增到場景中 const points = []; points.push( new THREE.Vector3( - 100, 50, 50 ) ); points.push( new THREE.Vector3( 0, 100, 0 ) ); points.push( new THREE.Vector3( 100, 0, 0 ) ); const geometry2= new THREE.BufferGeometry().setFromPoints( points ); const line2 = new THREE.Line( geometry2, material ); scene.add( line2 ); /** * 光源設定 */ //點光源 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(400, 300, 200); //設定相機位置 camera.lookAt(scene.position); //設定相機方向(指向的場景物件)、 var axesHelper = new THREE.AxesHelper( 250 ); scene.add( axesHelper ); /** * 建立渲染器物件 */ var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height);//設定渲染區域尺寸 renderer.setClearColor(0xb9d3ff, 1); //設定背景顏色 document.body.appendChild(renderer.domElement); //body元素中插入canvas物件 //執行渲染操作 指定場景、相機作為引數 //renderer.render(scene, camera); function render() { renderer.render(scene,camera);//執行渲染操作 } render(); var controls = new OrbitControls(camera,renderer.domElement);//建立控制元件物件 controls.addEventListener('change', render);//監聽滑鼠、鍵盤事件 </script> </body> </html>
VUE專案中引入Three.js
將TJ引入到專案中,同第一步。
然後,給出原始碼
<template> <div class="about"> <h1> aaa <div id="xxx" style="border: solid 1px red;width: 600px;height: 600px;display:block;"></div> <canvas id="canvas" style="display: block;border: solid 1px red;display:none;">你的瀏覽器不支援canvas</canvas> </h1> </div> </template> <script> /* eslint-disable no-console */ /* eslint-disable no-unused-vars */ /* eslint-disable no-extra-semi */ /* eslint-disable no-redeclare */ /* eslint-disable no-unused-labels */ /* eslint-disable no-undef */ /* eslint-disable no-case-declarations */ import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'; import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'; export default { name: "login", data() { return { }; }, mounted() { this.show_ts(); }, methods: { show_ts() { var scene = new THREE.Scene(); //建立管道成型的路徑(3D樣條曲線) var path = new THREE.CatmullRomCurve3([ new THREE.Vector3(-100, -50, -50), new THREE.Vector3(100, 50, 0), new THREE.Vector3(80, 50, 50), new THREE.Vector3(-50, 0, 100) ]); // path:路徑 40:沿著軌跡細分數 20:管道半徑 25:管道截面圓細分數 var geometry = new THREE.TubeGeometry(path, 40, 20, 25); console.log(geometry); //材質物件 var material = new THREE.LineBasicMaterial({ color: 0x000000 }); //線條模型物件 var line = new THREE.Line(geometry, material); scene.add(line); //線條物件新增到場景中 const points = []; points.push( new THREE.Vector3( - 100, 50, 50 ) ); points.push( new THREE.Vector3( 0, 100, 0 ) ); points.push( new THREE.Vector3( 100, 0, 0 ) ); const geometry2= new THREE.BufferGeometry().setFromPoints( points ); const line2 = new THREE.Line( geometry2, material ); scene.add( line2 ); /** * 光源設定 */ //點光源 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(400, 300, 200); //設定相機位置 camera.lookAt(scene.position); //設定相機方向(指向的場景物件)、 var axesHelper = new THREE.AxesHelper( 250 ); scene.add( axesHelper ); /** * 建立渲染器物件 */ var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height);//設定渲染區域尺寸 renderer.setClearColor(0xb9d3ff, 1); //設定背景顏色 //document.body.appendChild(renderer.domElement); //body元素中插入canvas物件 document.getElementById("xxx").appendChild(renderer.domElement); //body元素中插入canvas物件 //執行渲染操作 指定場景、相機作為引數 //renderer.render(scene, camera); function render() { renderer.render(scene,camera);//執行渲染操作 } render(); var controls = new OrbitControls(camera,renderer.domElement);//建立控制元件物件 controls.addEventListener('change', render);//監聽滑鼠、鍵盤事件 }, }, }; </script> <style lang="less"> </style>