用場(chǎng)景對(duì)three.js進(jìn)行渲染:場(chǎng)景、相機(jī)、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
場(chǎng)景
function Scene() {
Object3D.call( this );
this.type = 'Scene';
this.background = null;
this.fog = null;
this.overrideMaterial = null;
this.autoUpdate = true; // checked by the renderer
}
透視攝影機(jī)
參數(shù)解析:
- fov: 視野角度(FOV)。視野角度就是無(wú)論在什么時(shí)候,你所能在顯示器上看到的場(chǎng)景的范圍,它的單位是角度(與弧度區(qū)分開(kāi))。
- aspect: 長(zhǎng)寬比(aspect ratio)。 也就是你用一個(gè)物體的寬除以它的高的值。比如說(shuō),當(dāng)你在一個(gè)寬屏電視上播放老電影時(shí),可以看到圖像仿佛是被壓扁的。
- near: 近截面(near)
- far: 遠(yuǎn)截面(far)
function PerspectiveCamera( fov, aspect, near, far ) {
Camera.call( this );
this.type = 'PerspectiveCamera';
this.fov = fov !== undefined ? fov : 50;
this.zoom = 1;
this.near = near !== undefined ? near : 0.1;
this.far = far !== undefined ? far : 2000;
this.focus = 10;
this.aspect = aspect !== undefined ? aspect : 1;
this.view = null;
this.filmGauge = 35; // width of the film (default in millimeters)
this.filmOffset = 0; // horizontal film offset (same unit as gauge)
this.updateProjectionMatrix();
}
渲染器
function WebGLRenderer( parameters ) {
console.log( 'THREE.WebGLRenderer', REVISION );
parameters = parameters || {};
//...
}
淺試
創(chuàng)建一個(gè)渲染場(chǎng)景,沒(méi)有物體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./three.js"></script> -->
<style type="text/css">
body {
overflow: hidden;
margin: 0;
}
</style>
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
</head>
<body>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
</script>
</body>
</html>
創(chuàng)建一個(gè)物體
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
立方體(BoxGeometry)
參數(shù)解析
- width :X軸上面的寬度,默認(rèn)值為1。
- height :Y軸上面的高度,默認(rèn)值為1。
- depth :Z軸上面的深度,默認(rèn)值為1。
- widthSegments :可選)寬度的分段數(shù),默認(rèn)值是1。
- heightSegments :(可選)高度的分段數(shù),默認(rèn)值是1。
- depthSegments :可選)深度的分段數(shù),默認(rèn)值是1
function BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ) {
Geometry.call( this );
this.type = 'BoxGeometry';
this.parameters = {
width: width,
height: height,
depth: depth,
widthSegments: widthSegments,
heightSegments: heightSegments,
depthSegments: depthSegments
};
this.fromBufferGeometry( new BoxBufferGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ) );
this.mergeVertices();
}
材質(zhì)
function MeshBasicMaterial( parameters ) {
Material.call( this );
this.type = 'MeshBasicMaterial';
this.color = new Color( 0xffffff ); // emissive
this.map = null;
this.lightMap = null;
this.lightMapIntensity = 1.0;
this.aoMap = null;
this.aoMapIntensity = 1.0;
this.specularMap = null;
this.alphaMap = null;
this.envMap = null;
this.combine = MultiplyOperation;
this.reflectivity = 1;
this.refractionRatio = 0.98;
this.wireframe = false;
this.wireframeLinewidth = 1;
this.wireframeLinecap = 'round';
this.wireframeLinejoin = 'round';
this.skinning = false;
this.morphTargets = false;
this.lights = false;
this.setValues( parameters );
}
網(wǎng)格
function Mesh( geometry, material ) {
Object3D.call( this );
this.type = 'Mesh';
this.geometry = geometry !== undefined ? geometry : new BufferGeometry();
this.material = material !== undefined ? material : new MeshBasicMaterial( { color: Math.random() * 0xffffff } );
this.drawMode = TrianglesDrawMode;
this.updateMorphTargets();
}
物品渲染在場(chǎng)景上
// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene();
// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
// 渲染
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染場(chǎng)景大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 將渲染加到body
document.body.appendChild(renderer.domElement);
// 創(chuàng)建物體
const geometry = new THREE.BoxGeometry(1, 1, 1, 2,2,3);
const material = new THREE.MeshBasicMaterial({color: '#30b2f4'});
const cube = new THREE.Mesh(geometry, material);
// 場(chǎng)景中添加物體
scene.add(cube);
// 設(shè)置相機(jī)位置
camera.position.z = 3;
camera.position.x = 2;
camera.position.y = 1;
// 渲染
renderer.render(scene, camera);
淺加一個(gè)動(dòng)畫(huà)
window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個(gè)動(dòng)畫(huà),并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫(huà)。該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù),該回調(diào)函數(shù)會(huì)在瀏覽器下一次重繪之前執(zhí)行
window.requestAnimationFrame(callback);
// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene();
// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
// 渲染
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染場(chǎng)景大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 將渲染加到body
document.body.appendChild(renderer.domElement);
// 創(chuàng)建物體
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 3);
const material = new THREE.MeshBasicMaterial({ color: '#30b2f4' });
const cube = new THREE.Mesh(geometry, material);
// 場(chǎng)景中添加物體
scene.add(cube);
// 設(shè)置相機(jī)位置
camera.position.z = 3;
camera.position.x = 2;
camera.position.y = 1;
// 添加動(dòng)畫(huà)效果
function animation() {
window.requestAnimationFrame(animation);
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
camera.position.z += 0.01
camera.position.y += 0.01
// 渲染
renderer.render(scene, camera);
}
animation()
添加曲線
參數(shù)解析
- points – Vector3點(diǎn)數(shù)組
- closed – 該曲線是否閉合,默認(rèn)值為false。
- curveType – 曲線的類型,默認(rèn)值為centripetal。
- tension – 曲線的張力,默認(rèn)為0.5。
function CatmullRomCurve3( points, closed, curveType, tension ) {
Curve.call( this );
this.type = 'CatmullRomCurve3';
this.points = points || [];
this.closed = closed || false;
this.curveType = curveType || 'centripetal';
this.tension = tension || 0.5;
}
function Vector3( x, y, z ) {
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
}
function BufferGeometry() {
Object.defineProperty( this, 'id', { value: bufferGeometryId += 2 } );
this.uuid = _Math.generateUUID();
this.name = '';
this.type = 'BufferGeometry';
this.index = null;
this.attributes = {};
this.morphAttributes = {};
this.groups = [];
this.boundingBox = null;
this.boundingSphere = null;
this.drawRange = { start: 0, count: Infinity };
}
function LineBasicMaterial( parameters ) {
Material.call( this );
this.type = 'LineBasicMaterial';
this.color = new Color( 0xffffff );
this.linewidth = 1;
this.linecap = 'round';
this.linejoin = 'round';
this.lights = false;
this.setValues( parameters );
}
function Line( geometry, material, mode ) {
if ( mode === 1 ) {
console.warn( 'THREE.Line: parameter THREE.LinePieces no longer supported. Created THREE.LineSegments instead.' );
return new LineSegments( geometry, material );
}
Object3D.call( this );
this.type = 'Line';
this.geometry = geometry !== undefined ? geometry : new BufferGeometry();
this.material = material !== undefined ? material : new LineBasicMaterial( { color: Math.random() * 0xffffff } );
}
//Create a closed wavey loop
const curve = new THREE.CatmullRomCurve3([
new THREE.Vector3(-10, 0, 10),
new THREE.Vector3(-5, 5, 5),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(5, -5, 5),
new THREE.Vector3(10, 0, 10)
]);
const points = curve.getPoints(50);
const geometryCurve = new THREE.BufferGeometry().setFromPoints(points);
const materialCurve = new THREE.LineBasicMaterial({ color: 0xff0000 });
// Create the final object to add to the scene
const curveObject = new THREE.Line(geometryCurve, materialCurve);
// 場(chǎng)景中添加物體
scene.add(curveObject);
添加燈光
function AmbientLight( color, intensity ) {
Light.call( this, color, intensity );
this.type = 'AmbientLight';
this.castShadow = undefined;
}
動(dòng)畫(huà)執(zhí)行一段時(shí)間,移除物體
// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene();
// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(76, window.innerWidth / window.innerHeight, 1, 1000);
// 渲染
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染場(chǎng)景大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 將渲染加到body
document.body.appendChild(renderer.domElement);
// 創(chuàng)建物體
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 3);
const material = new THREE.MeshBasicMaterial({ color: '#30b2f4' });
const cube = new THREE.Mesh(geometry, material);
//Create a closed wavey loop
const curve = new THREE.CatmullRomCurve3([
new THREE.Vector3(-10, 0, 10),
new THREE.Vector3(-5, 5, 5),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(5, -5, 5),
new THREE.Vector3(10, 0, 10)
]);
const points = curve.getPoints(50);
const geometryCurve = new THREE.BufferGeometry().setFromPoints(points);
const materialCurve = new THREE.LineBasicMaterial({ color: 0xff0000 });
// Create the final object to add to the scene
const curveObject = new THREE.Line(geometryCurve, materialCurve);
// 添加燈光
const light = new THREE.AmbientLight('#52D59A'); // soft white light
// 場(chǎng)景中添加物體
scene.add(light);
scene.add(cube);
scene.add(curveObject);
// 設(shè)置相機(jī)位置
camera.position.z = 3;
camera.position.x = 2;
camera.position.y = -2;
let count = 0
// 添加動(dòng)畫(huà)效果
function animation() {
if (count !== 110) {
window.requestAnimationFrame(animation);
renderer.render(scene, camera);
}
if (count >= 100) {
scene.remove(cube)
}
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
camera.position.z += 0.01
camera.position.y += 0.01
count++;
console.log('count', count);
// 渲染
}
animation()
function Object3D() {
Object.defineProperty( this, 'id', { value: object3DId ++ } );
this.uuid = _Math.generateUUID();
this.name = '';
this.type = 'Object3D';
this.parent = null;
this.children = [];
this.up = Object3D.DefaultUp.clone();
var position = new Vector3();
var rotation = new Euler();
var quaternion = new Quaternion();
var scale = new Vector3( 1, 1, 1 );
function onRotationChange() {
quaternion.setFromEuler( rotation, false );
}
function onQuaternionChange() {
rotation.setFromQuaternion( quaternion, undefined, false );
}
rotation.onChange( onRotationChange );
quaternion.onChange( onQuaternionChange );
Object.defineProperties( this, {
position: {
enumerable: true,
value: position
},
rotation: {
enumerable: true,
value: rotation
},
quaternion: {
enumerable: true,
value: quaternion
},
scale: {
enumerable: true,
value: scale
},
modelViewMatrix: {
value: new Matrix4()
},
normalMatrix: {
value: new Matrix3()
}
} );
this.matrix = new Matrix4();
this.matrixWorld = new Matrix4();
this.matrixAutoUpdate = Object3D.DefaultMatrixAutoUpdate;
this.matrixWorldNeedsUpdate = false;
this.layers = new Layers();
this.visible = true;
this.castShadow = false;
this.receiveShadow = false;
this.frustumCulled = true;
this.renderOrder = 0;
this.userData = {};
}
修改渲染的背景顏色
// 渲染
const renderer = new THREE.WebGLRenderer();
// 更改渲染背景色,默認(rèn)為黑色
renderer.setClearColor('rgba(191, 115, 87, 0.95)', 1.0)
渲染3D文本
在官網(wǎng)可隨意下載一個(gè)字體json文件放置本地使用
地址:https://github.com/mrdoob/three.js/tree/dev/examples/fonts
// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene();
const loader = new THREE.FontLoader();
loader.load('./gentilis_regular.json', function (font) {
const geometryText = new THREE.TextGeometry('Hello three.js!', {
font: font,
size: 0.3,
height: 0.1,
// curveSegments: 12,//表示文本的)曲線上點(diǎn)的數(shù)量。默認(rèn)值為12。
// bevelEnabled: true,//是否開(kāi)啟斜角
// bevelThickness: 10,//文本上斜角的深度,默認(rèn)值為20。
// bevelSize: 8,//斜角與原始文本輪廓之間的延伸距離。默認(rèn)值為8。
// bevelSegments: 5//斜角的分段數(shù)。默認(rèn)值為3。
});
const m = new THREE.MeshBasicMaterial({color:'#ffffff'});
const mesh = new THREE.Mesh(geometryText,m);
scene.add(mesh)
});
文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-467852.html
GitHub:https://github.com/mrdoob/three.js/blob/master/src/scenes/Scene.js文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-467852.html
到了這里,關(guān)于Three.js初識(shí):渲染立方體、3d字體、修改渲染背景顏色的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!