หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

สาม.js

ไลบรารี JavaScript 3D

จุดมุ่งหมายของโครงการคือการสร้างไลบรารี 3D อเนกประสงค์ที่ใช้งานง่าย น้ำหนักเบา ข้ามเบราว์เซอร์ได้ รุ่นปัจจุบันมีเฉพาะตัวเรนเดอร์ WebGL แต่ตัวเรนเดอร์ WebGPU (รุ่นทดลอง), SVG และ CSS3D ก็มีให้ใช้งานเป็นส่วนเสริมเช่นกัน

ตัวอย่าง — เอกสาร — คู่มือ — Wiki — การโยกย้าย — คำถาม — ฟอรั่ม — Discord

การใช้งาน

โค้ดนี้จะสร้างฉาก กล้อง และลูกบาศก์เรขาคณิต และจะเพิ่มลูกบาศก์ให้กับฉาก จากนั้นจะสร้างตัวเรนเดอร์ WebGL สำหรับฉากและกล้อง และเพิ่มวิวพอร์ตนั้นให้กับองค์ประกอบ document.body สุดท้ายนี้จะทำให้ลูกบาศก์ภายในฉากเคลื่อนไหวสำหรับกล้อง 

 import * as THREE from 'three' ;

const width = window . innerWidth , height = window . innerHeight ;

// init

const camera = new THREE . PerspectiveCamera ( 70 , width / height , 0.01 , 10 ) ;
camera . position . z = 1 ;

const scene = new THREE . Scene ( ) ;

const geometry = new THREE . BoxGeometry ( 0.2 , 0.2 , 0.2 ) ;
const material = new THREE . MeshNormalMaterial ( ) ;

const mesh = new THREE . Mesh ( geometry , material ) ;
scene . add ( mesh ) ;

const renderer = new THREE . WebGLRenderer ( { antialias : true } ) ;
renderer . setSize ( width , height ) ;
renderer . setAnimationLoop ( animate ) ;
document . body . appendChild ( renderer . domElement ) ;

// animation

function animate ( time ) {

	mesh . rotation . x = time / 2000 ;
	mesh . rotation . y = time / 1000 ;

	renderer . render ( scene , camera ) ;

}

หากทุกอย่างเป็นไปด้วยดีคุณควรเห็นสิ่งนี้

กำลังโคลนพื้นที่เก็บข้อมูลนี้

การโคลน repo พร้อมประวัติทั้งหมดส่งผลให้มีการดาวน์โหลดประมาณ 2 GB หากคุณไม่ต้องการประวัติทั้งหมด คุณสามารถใช้พารามิเตอร์ depth เพื่อลดขนาดการดาวน์โหลดได้อย่างมาก 

git clone --depth=1 https://github.com/mrdoob/three.js.git

บันทึกการเปลี่ยนแปลง

ข่าวประชาสัมพันธ์

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด