首页 > 学术百科

使用Three.js心得系列一如何创建三维网格

使⽤Three.js⼼得系列⼀如何创建三维⽹格⼀、

three.js如何创建三维⽹格。

官⽅提供了gridHelper的⽅式：

先看下我的测试效果：

上源码：

源码为完整的源码，其中包括⼀个⼩实例，点击也年的移动按钮，⼈物会沿着X的⽅向，前进⾏⾛。

<!DOCTYPE html>

<head>

<title>测试三维图</title>

</head>

<body>

李振翩</div>

import * as THREE from '../dule.js';

import Stats from './jsm/dule.js';

import { OrbitControls } from './jsm/controls/OrbitControls.js';

import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';

import { SVGLoader } from './jsm/loaders/SVGLoader.js';

import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

// Graphics variables

let container, stats;

let camera, controls, scene, renderer;

let textureLoader;

const clock = new THREE.Clock();

let clickRequest = false;

const mouseCoords = new THREE.Vector2();

const raycaster = new THREE.Raycaster();

const ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );

const pos = new THREE.Vector3();

const quat = new THREE.Quaternion();

// Physics variables

const gravityConstant = - 9.8;

住房问题let physicsWorld;

const rigidBodies = [];

const softBodies = [];

const margin = 0.05;

let transformAux1;

let softBodyHelpers;

let guiData;

Ammo().then( function ( AmmoLib ) {

Ammo = AmmoLib;

init();

animate();

} );

function init() {

initGraphics();

initPhysics();

createObjects();

initInput();

guiData = {

currentURL: './01Images_Test/1.svg',

drawFillShapes: true,

drawStrokes: true,

fillShapesWireframe: false,

strokesWireframe: false

};

}

//绘制

function initGraphics() {

container = ElementById( 'container' );

//场景加个摄像机

我的叔叔于勒续写var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;

// camera attributes

var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; // set up camera

camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);

//camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );

scene = new THREE.Scene();

scene.background = new THREE.Color( 0xbfd1e5 );

// scene.background = new THREE.Color( 0xe0e2e9 );

//显⽰坐标轴

var axes = new THREE.AxisHelper(200);

//axes.position.x=-1000;

//axes.position.z=-1000; 三维轴会到左上⾓

scene.add(axes);

//底图⽹格 (总长宽，分多少个⽹格，颜⾊，轴线颜⾊，和⽹格颜⾊ #e6e8ed)

var gridHelper = new THREE.GridHelper(2000, 100, 0x888888, 0x888888);

gridHelper.position.x=1000;

gridHelper.position.z=1000;

scene.add(gridHelper);

//camera.position.set( - 7, 5, 8 );

camera.position.set(0, 1000, 1500 );

renderer = new THREE.WebGLRenderer();

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, window.innerHeight );

abled = true;

renderer.setClearColor('#FFFFFF');//设置场景的颜⾊

container.appendChild( renderer.domElement );

//场景缩放

controls = new OrbitControls( camera, renderer.domElement );

controls.target.set( 0, 2, 0 );

controls.update();

textureLoader = new THREE.TextureLoader();

const ambientLight = new THREE.AmbientLight( 0x404040 );

scene.add( ambientLight );

const light = new THREE.DirectionalLight( 0xffffff, 1 );

light.position.set( - 10, 10, 5 );

light.castShadow = true;

const d = 20;

light.shadow.camera.left = - d;

light.shadow.camera.right = d;

light.p = d;

light.shadow.camera.bottom = - d;

light.ar = 2;

light.shadow.camera.far = 50;

light.shadow.mapSize.x = 1024;

light.shadow.mapSize.y = 1024;

scene.add( light );

stats = new Stats();

stats.domElement.style.position = 'absolute';

stats.p = '0px';

container.appendChild( stats.domElement );

window.addEventListener( 'resize', onWindowResize, false );

createBaseStation();与外婆同行

}

//物理特效

function initPhysics() {

// Physics configuration

const collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();

const dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );

const broadphase = new Ammo.btDbvtBroadphase();

const solver = new Ammo.btSequentialImpulseConstraintSolver();

const softBodySolver = new Ammo.btDefaultSoftBodySolver();

physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver ); physicsWorld.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );

transformAux1 = new Ammo.btTransform();

softBodyHelpers = new Ammo.btSoftBodyHelpers();

}

//创建场景内元素

function createObjects() {

// Ground

pos.set( 0, - 0.5, 0 );

quat.set( 0, 0, 0, 1 );

const ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );

ground.castShadow = true;

textureLoader.load( "textures/grid.png", function ( texture ) {

texture.wrapS = THREE.RepeatWrapping;

texture.wrapT = THREE.RepeatWrapping;

ground.material.map = texture;

dsUpdate = true;

} );

// Create soft volumes

const volumeMass = 15;

//创建球

// const sphereGeometry = new THREE.SphereBufferGeometry( 1.5, 40, 25 );

// anslate( 5, 5, 0 );

// createSoftVolume( sphereGeometry, volumeMass, 250 );

//创建盒⼦

/ const boxGeometry = new THREE.BoxBufferGeometry( 1, 1, 5, 4, 4, 20 );

// anslate( - 2, 5, 0 );

// createSoftVolume( boxGeometry, volumeMass, 120 );

// Ramp

//pos.set( 3, 1, 0 );

法制论坛//quat.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), 30 * Math.PI / 180 );

//const obstacle = createParalellepiped( 10, 1, 4, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0x606060 } ) );

//obstacle.castShadow = true;

//iveShadow = true;

}

function processGeometry( bufGeometry ) {

// Ony consider the position values when merging the vertices

const posOnlyBufGeometry = new THREE.BufferGeometry();

posOnlyBufGeometry.setAttribute( 'position', Attribute( 'position' ) );

posOnlyBufGeometry.setIndex( Index() );

// Merge the vertices so the triangle soup is converted to indexed triangles

const indexedBufferGeom = Vertices( posOnlyBufGeometry );

// Create index arrays mapping the indexed vertices to bufGeometry vertices

mapIndices( bufGeometry, indexedBufferGeom );

}

function isEqual( x1, y1, z1, x2, y2, z2 ) {

const delta = 0.000001;

return Math.abs( x2 - x1 ) < delta &&

Math.abs( y2 - y1 ) < delta &&

Math.abs( z2 - z1 ) < delta;

}

function mapIndices( bufGeometry, indexedBufferGeom ) {

// Creates ammoVertices, ammoIndices and ammoIndexAssociation in bufGeometry

const vertices = bufGeometry.attributes.position.array;

const idxVertices = indexedBufferGeom.attributes.position.array;

const indices = indexedBufferGeom.index.array;

const numIdxVertices = idxVertices.length / 3;

const numVertices = vertices.length / 3;

bufGeometry.ammoVertices = idxVertices;

bufGeometry.ammoIndices = indices;

bufGeometry.ammoIndexAssociation = [];

for ( let i = 0; i < numIdxVertices; i ++ ) {

const association = [];

bufGeometry.ammoIndexAssociation.push( association );

小柳树和小枣树教学设计

const i3 = i * 3;

for ( let j = 0; j < numVertices; j ++ ) {

const j3 = j * 3;

if ( isEqual( idxVertices[ i3 ], idxVertices[ i3 + 1 ], idxVertices[ i3 + 2 ],

vertices[ j3 ], vertices[ j3 + 1 ], vertices[ j3 + 2 ] ) ) {

association.push( j3 );

}

function createSoftVolume( bufferGeom, mass, pressure ) {

processGeometry( bufferGeom );

const volume = new THREE.Mesh( bufferGeom, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) ); volume.castShadow = true;

volume.frustumCulled = false;

本文发布于:2024-09-21 14:47:34，感谢您对本站的认可！

本文链接：https://www.17tex.com/xueshu/91003.html

上一篇：基于Rhino的三维网格快速建模

下一篇：基于顶点统计特征的三维网格模型盲水印算法

标签：场景移动源码看下续写

留言与评论（共有 0 条评论）