国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Three.js初識(shí):渲染立方體、3d字體、修改渲染背景顏色

這篇具有很好參考價(jià)值的文章主要介紹了Three.js初識(shí):渲染立方體、3d字體、修改渲染背景顏色。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

用場(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
Three.js初識(shí):渲染立方體、3d字體、修改渲染背景顏色

// 創(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)
});

Three.js初識(shí):渲染立方體、3d字體、修改渲染背景顏色

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)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • Qt3D繪制旋轉(zhuǎn)立方體

    Qt3D繪制旋轉(zhuǎn)立方體

    近期用了款叫DesktopSpace,也想實(shí)現(xiàn)一下這款軟件實(shí)現(xiàn)的效果 具體實(shí)現(xiàn)步驟: 使用Qt3D繪制個(gè)旋轉(zhuǎn)的立方體(一) 使用快捷鍵控制立方體顯示面(二) 創(chuàng)建6個(gè)人虛擬桌面,截取不同虛擬桌面,顯示在不同的面上 (三) 在立方體上播放視頻 首先用Qt3D繪制一下桌面截圖旋轉(zhuǎn)的效

    2024年02月06日
    瀏覽(22)
  • OpenGLES:繪制一個(gè)混色旋轉(zhuǎn)的3D立方體

    OpenGLES:繪制一個(gè)混色旋轉(zhuǎn)的3D立方體

    混色旋轉(zhuǎn)的3D立方體 之前關(guān)于OpenGLES實(shí)戰(zhàn)開(kāi)發(fā)的博文,不論是實(shí)現(xiàn)相機(jī)濾鏡還是繪制圖形,都是在2D緯度 這篇博文開(kāi)始,將會(huì)使用OpenGLES進(jìn)入3D世界 本篇博文會(huì)實(shí)現(xiàn)一個(gè)顏色漸變、旋轉(zhuǎn)的3D立方體 動(dòng)態(tài)3D圖形的繪制,需要具備一些基礎(chǔ)的 線性代數(shù) (向量、矩陣) 和 空間坐標(biāo)系轉(zhuǎn)

    2024年02月06日
    瀏覽(37)
  • hypercube背景設(shè)置為白色,繪制高光譜3D立方體
  • ??創(chuàng)意網(wǎng)頁(yè):使用CSS和HTML創(chuàng)建令人驚嘆的3D立方體

    ??創(chuàng)意網(wǎng)頁(yè):使用CSS和HTML創(chuàng)建令人驚嘆的3D立方體

    ? 博主: 命運(yùn)之光 ? ?? 專欄: Python星辰秘典 ?? 專欄: web開(kāi)發(fā)(簡(jiǎn)單好用又好看) ?? 專欄: Java經(jīng)典程序設(shè)計(jì) ?? 博主的其他文章: 點(diǎn)擊進(jìn)入博主的主頁(yè) 前言: 歡迎踏入我的Web項(xiàng)目專欄,一段神奇而令人陶醉的數(shù)字世界! ?? 在這里,我將帶您穿越時(shí)空,揭開(kāi)屬于

    2024年02月12日
    瀏覽(36)
  • 使用Unity3D創(chuàng)建一個(gè)立方體(Cube)游戲?qū)ο蟛?dòng)Unity

    Unity3D是一個(gè)強(qiáng)大的游戲開(kāi)發(fā)引擎,可以用來(lái)創(chuàng)建各種類型的游戲和交互應(yīng)用程序。在本文中,我們將探討如何使用Unity3D創(chuàng)建一個(gè)立方體(Cube)游戲?qū)ο?,并啟?dòng)Unity編輯器。 首先,確保你已經(jīng)安裝了Unity3D并且已經(jīng)在你的計(jì)算機(jī)上成功啟動(dòng)。然后,按照以下步驟進(jìn)行操作:

    2024年02月05日
    瀏覽(122)
  • HTML5七夕情人節(jié)表白網(wǎng)頁(yè)制作【抖音3D立方體圖像庫(kù)】HTML+CSS+JavaScript html生日快樂(lè)祝福網(wǎng)頁(yè)制作

    HTML5七夕情人節(jié)表白網(wǎng)頁(yè)制作【抖音3D立方體圖像庫(kù)】HTML+CSS+JavaScript html生日快樂(lè)祝福網(wǎng)頁(yè)制作

    這是程序員表白系列中的100款網(wǎng)站表白之一,旨在讓任何人都能使用并創(chuàng)建自己的表白網(wǎng)站給心愛(ài)的人看。 此波共有100個(gè)表白網(wǎng)站,可以任意修改和使用,很多人會(huì)希望向心愛(ài)的男孩女孩告白,生性靦腆的人即使那個(gè)TA站在眼前都不敢向前表白。說(shuō)不出口的話就用短視頻告訴

    2024年02月02日
    瀏覽(89)
  • 【css】動(dòng)畫(huà):立方體相冊(cè)
  • Opengl之立方體貼圖

    Opengl之立方體貼圖

    簡(jiǎn)單來(lái)說(shuō), 立方體貼圖就是一個(gè)包含了6個(gè)2D紋理的紋理 ,每個(gè)2D紋理都組成了 立方體的一個(gè)面 :一個(gè)有紋理的立方體。你可能會(huì)奇怪,這樣一個(gè)立方體有什么用途呢?為什么要把6張紋理合并到一張紋理中,而不是直接使用6個(gè)單獨(dú)的紋理呢?立方體貼圖有一個(gè)非常有用的特

    2024年02月07日
    瀏覽(23)
  • 【libGDX】立方體手動(dòng)旋轉(zhuǎn)

    【libGDX】立方體手動(dòng)旋轉(zhuǎn)

    ? 本文主要介紹使用 libGDX 繪制立方體,并實(shí)現(xiàn)手動(dòng)觸摸事件控制立方體旋轉(zhuǎn)。 ? 為方便控制觸摸旋轉(zhuǎn),并提高渲染性能,我們通過(guò)改變相機(jī)的位置和姿態(tài)實(shí)現(xiàn)立方體旋轉(zhuǎn)效果。 ? 讀者如果對(duì) libGDX 不太熟悉,請(qǐng)回顧以下內(nèi)容。 使用Mesh繪制三角形 使用Mesh繪制矩形 使用M

    2024年03月09日
    瀏覽(32)
  • 【Filament】立方體貼圖(6張圖)

    【Filament】立方體貼圖(6張圖)

    ? 本文通過(guò)一個(gè)立方體貼圖的例子,講解三維紋理貼圖(子網(wǎng)格貼圖)的應(yīng)用,案例中使用 6 張不同的圖片給立方體貼圖,圖片如下。 ? 讀者如果對(duì) Filament 不太熟悉,請(qǐng)回顧以下內(nèi)容。 Filament環(huán)境搭建 繪制三角形 繪制矩形 繪制圓形 繪制立方體 紋理貼圖 ? 本文項(xiàng)目結(jié)構(gòu)

    2024年03月09日
    瀏覽(35)

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包