當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Extjs 4.2 MVC+ThreeJs学习笔记（二）一个简单的ThreeJS场景

發布時間：2023/12/19 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 Extjs 4.2 MVC+ThreeJs学习笔记（二）一个简单的ThreeJS场景小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

ThreeJS基本要素
在我們用ThreeJS創建的3D世界里，會有很多的元素，然而以下四個是最基本的元素，也就是說只要包含了這些元素，就可以渲染出一個場景。

一個Scene（場景）
一個renderer（渲染器）
一個camera（鏡頭）
一個object（模型對象）

瀏覽器
以我的經驗來看，Google的Chrome瀏覽器是表現最優秀的瀏覽器，沒有之一。Chrome支持Canvas，WebGL和SVG。Firefox是第二選擇，Opera也支持WebGL，Mac上的Safari只需要開啟WebGL設置，IE目前不支持WebGL需要添加插件（IE11據說會支持）。強烈推薦大家使用Chrome瀏覽器。

場景
要做一個場景，首先你需要一個ThreeJS庫，下載地址：https://github.com/mrdoob/three.js

<html>

<head>

???<title>一個簡單的場景</title>

</head>

<body>

???<script src="../build/three.min.js"></script>

???<script>

???//定義畫布的高度和寬度

???var width = 400, height = 300;

???//定義鏡頭的角度寬高比最近最遠的限制

???var view_Angle = 45,aspect = width / height,near = 0.1,far = 10000;

???//創建一個Div元素這是裝Canvas的容器

???var container = document.createElement( 'div' );

???//將容器添加到body中

???document.body.appendChild( container );

???//創建一個WebGL渲染器

???var renderer = new THREE.WebGLRenderer();

???//創建一個鏡頭參數是上面定義的

???var camera =new THREE.PerspectiveCamera(view_Angle,aspect,near,far);

???//創建一個場景

???var scene = new THREE.Scene();

???//將鏡頭加入到場景中

???scene.add(camera);

???//把渲染器的DOM元素加到容器中實際上是把一個WebGL渲染器生成的Canvas場景添加到body中的DIV容器中去了

???container.appendChild( renderer.domElement );

???//創建一個Cube

???var cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshNormalMaterial() );

???scene.add(cube);

???//調整鏡頭的Z軸坐標

???camera.position.z = 500;

???//調整畫面的大小

???renderer.setSize(width, height);

???//渲染

???renderer.render( scene, camera );

???</script>

</body>

</html>

在Chrome瀏覽器中打開你會看到這樣一幅圖：

它是一個立方體，至于為什么我們只能看到一個正方形是因為我們只渲染了一幀，所以只能看到它的一個面。你可以調整一下鏡頭的角度，有可能會看到3個面，當然也有可能會什么都看不到＝。＝
要理解空間坐標系，鏡頭這些東西，還是需要一些OpenGL的基礎知識的，推薦大家看一下OpenGL編程指南，不用太深入，了解一些基礎知識就好了。

轉載于:https://www.cnblogs.com/Mirana/p/3288685.html

總結

以上是生活随笔為你收集整理的Extjs 4.2 MVC+ThreeJs学习笔记（二）一个简单的ThreeJS场景的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：音乐歌名网名，好听的歌词昵称558个
下一篇： JavaScript怎么上传图片