當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2023/12/19 javascript 52 豆豆

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

ThreeJS基本要素
在我們用ThreeJS創(chuàng)建的3D世界里，會(huì)有很多的元素，然而以下四個(gè)是最基本的元素，也就是說(shuō)只要包含了這些元素，就可以渲染出一個(gè)場(chǎng)景。

一個(gè)Scene（場(chǎng)景）
一個(gè)renderer（渲染器）
一個(gè)camera（鏡頭）
一個(gè)object（模型對(duì)象）

瀏覽器
以我的經(jīng)驗(yàn)來(lái)看，Google的Chrome瀏覽器是表現(xiàn)最優(yōu)秀的瀏覽器，沒(méi)有之一。Chrome支持Canvas，WebGL和SVG。Firefox是第二選擇，Opera也支持WebGL，Mac上的Safari只需要開啟WebGL設(shè)置，IE目前不支持WebGL需要添加插件（IE11據(jù)說(shuō)會(huì)支持）。強(qiáng)烈推薦大家使用Chrome瀏覽器。

場(chǎng)景
要做一個(gè)場(chǎng)景，首先你需要一個(gè)ThreeJS庫(kù)，下載地址：https://github.com/mrdoob/three.js

<html>

<head>

???<title>一個(gè)簡(jiǎn)單的場(chǎng)景</title>

</head>

<body>

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

???<script>

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

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

???//定義鏡頭的角度寬高比最近最遠(yuǎn)的限制

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

???//創(chuàng)建一個(gè)Div元素這是裝Canvas的容器

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

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

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

???//創(chuàng)建一個(gè)WebGL渲染器

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

???//創(chuàng)建一個(gè)鏡頭參數(shù)是上面定義的

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

???//創(chuàng)建一個(gè)場(chǎng)景

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

???//將鏡頭加入到場(chǎng)景中

???scene.add(camera);

???//把渲染器的DOM元素加到容器中實(shí)際上是把一個(gè)WebGL渲染器生成的Canvas場(chǎng)景添加到body中的DIV容器中去了

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

???//創(chuàng)建一個(gè)Cube

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

???scene.add(cube);

???//調(diào)整鏡頭的Z軸坐標(biāo)

???camera.position.z = 500;

???//調(diào)整畫面的大小

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

???//渲染

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

???</script>

</body>

</html>

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

它是一個(gè)立方體，至于為什么我們只能看到一個(gè)正方形是因?yàn)槲覀冎讳秩玖艘粠?#xff0c;所以只能看到它的一個(gè)面。你可以調(diào)整一下鏡頭的角度，有可能會(huì)看到3個(gè)面，當(dāng)然也有可能會(huì)什么都看不到＝。＝
要理解空間坐標(biāo)系，鏡頭這些東西，還是需要一些OpenGL的基礎(chǔ)知識(shí)的，推薦大家看一下OpenGL編程指南，不用太深入，了解一些基礎(chǔ)知識(shí)就好了。

轉(zhuǎn)載于:https://www.cnblogs.com/Mirana/p/3288685.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

javascript

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

總結(jié)