|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
" P$ I3 s) O% Y- n, [/ a& \! S1 c- H2 B% s
废话不多说,官网自己百度下, threejs.org ,入门很简单。4 \1 t- Z K- c1 c$ i. y
0 T- L" Z8 H" D! N5 [5 `创建的javascript脚本如下
' F- P) F. E! E5 o0 @ D; c; U& \
. p! E) V: r8 k6 P( i+ N% `3 X
[mw_shl_code=javascript,true]$ p- o- {5 N: J! g6 ]4 ~. w1 ?8 p
var scene = new THREE.Scene();+ _! G2 Q- f( u0 E B) |
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);6 B. [" \% h1 l+ |# K) m. F; r
var renderer = new THREE.WebGLRenderer();0 C0 N4 [" S( d2 i4 h, j; Y
renderer.setSize(window.innerWidth, window.innerHeight);
* h0 L- t" N* Q6 [ k" L( _document.body.appendChild(renderer.domElement);# V$ Q/ ~& r" |
# ^6 c6 @' s% T1 g5 g6 }3 j3 y// Refresh Issue
: f$ B# q4 i: a* K8 t9 ?window.addEventListener('resize', function () {
4 G- @0 }; z8 @! O' f C var width = this.window.innerWidth;# C4 u. ^! q% h1 r9 ^( [/ u
var height = this.window.innerHeight; G7 h) W7 z R" E
render.setSize(width, height);
5 T0 O# u9 S+ C$ n4 ~4 c# U! k camera.aspect = width / height;' r0 `6 R; g# {1 Q: t
camera.updateProjectionMatrix();
/ q* k) y! e/ V& E})$ A" F- J) b. V; ~
# G# b; x2 G, L//orbit contorls5 e7 K. i4 U3 H) L- u; c. T* }
controls = new THREE.OrbiTControls(camera,renderer.domElement);/ d' c7 ^2 d- }1 o4 ^1 ?
7 L2 S* E" Q3 F# G- d$ ]//create the shape1 a5 L4 Z# {4 C$ E+ `( J. t: b
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
& a/ A) x/ d1 k& M( F/ T//create a meterial
+ M. G# k- Y( o' dvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
8 H& N( f% H6 ]//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];) N" M: V* h3 s9 d+ ?' D
//var material = new THREE.MeshFaceMaterial(myMaterial);$ V9 {5 |; R# p+ e: F% ^
( f; d1 Z! a9 X$ h7 C M. _1 svar cube = new THREE.Mesh(geometry, material);
3 C: i/ }5 h) @7 zscene.add(cube);0 d. Y/ E5 a4 J/ w
camera.position.z = 5;
+ a5 l, [. t$ q6 f8 l$ V6 {) k" L$ [2 G! X% G+ z. a# [) A% M
: |" S* \ z; [' p" Z9 Q1 w) }! G$ N
; P$ k, b' ] S* Z$ g" P* V/ c+ x8 o
; O) n! V( G1 O7 `- E/ U
//rotate ( G r2 i C: `* @
var update = function () {8 ~! T O2 e$ `4 e$ j9 C+ X
cube.rotation.x += .01;
% b% o* Y S+ r6 g$ w( `" ] cube.rotation.y += .02;
, z; o7 @9 O5 n0 t4 l' n; Q1 h cube.rotation.z += .02;5 o; Y ~% J% s& r5 s: v. n
}
8 Q! q1 i+ E- a3 k5 t# s+ a9 }
# ~( w, z. ~- J6 k9 Mvar render = function () {0 Z8 m$ z/ N& ~ o6 {; X7 ?
renderer.render(scene, camera);
: G( F# ]. B' Y& n+ [, J}
$ o" i" u& Q3 |9 ~3 k, a
9 L7 Z1 n5 i; [& ~& A9 }8 v% U$ }
7 i; z( R8 s; i! @$ h
var Gameloop = function () {6 L& ?+ D l+ i
requestAnimationFrame(Gameloop);2 Z v! \) e: v1 O
update();
+ N! b7 N$ i4 c' [4 _) u# S' m render();7 r s6 Z7 l8 O+ k% R
}
3 C* ]( }* I" E% Z1 [0 l* z+ z; b- z+ D. J
Gameloop();. ~' I( D5 G! E5 |( D( a
[/mw_shl_code]6 H% p* w" W0 h- Q
8 q; |! I7 R9 q! [
3 L+ f: U! b7 w% C: k4 e% D3 f! J' Y W
引入争取的html,
' p, ]" \$ K: |8 b$ S: A
2 l. M5 T) _7 w1 t' h% Z% x& Y[mw_shl_code=html,true]<!DOCTYPE html>1 _7 S) a1 J; V6 @
<html>9 i% j. `" Z0 m
3 Z! g# {' {3 S% R' o
<head>3 B! F* t) G/ ?% Z% {
<title>hello ThreeJS</title>3 z# M7 a/ n" |$ W& Z. W
<style>6 C" E0 V* g, A3 X" D1 e
body {% H! N* D( a$ Z) S" K6 M% K% L
margin: 0;
1 d& S2 q, \# L }& w, r; L( }4 h0 [2 _) X
( E/ ^6 T. L R" I+ d. l+ c
canvas {6 W9 y5 x B3 X# y6 V9 j" z
width: 100%;; d7 P; n3 T9 g: S$ x
height: 100%;
' U( s: Y% x' P! z3 t' W }
+ f- T( `& }) Q# u( T" |1 d2 o3 t7 P* s0 ~: W8 k) t
h1 {
. V- l: ^6 }7 r2 @! [ color: aqua;/ {( q5 N7 m! q/ ?3 L4 X) Y. [
}" S/ L0 @7 l# v% a1 ?! H2 _2 `
</style>. } k6 k) e+ @& H! B
</head> A) @1 I9 y1 u R. L' s
7 X) |3 Y7 R9 U7 b; \% `. `<body>, p% w3 G u. q4 C5 @
<script src="js/three.js"></script>
5 ]0 S, q$ k3 D8 ^/ { <script src="js/OrbitControls.js"></script>& O j3 ?3 T: x
<script src="myjs.js"></script>
T/ y$ T1 W! V7 }" @0 H+ g ( V* N- O+ N3 e" r. M0 e
; d8 t% U2 m \) _0 y
5 }0 J. i2 V( d b, w6 ]
5 g1 e% h3 R) v+ p- O</body>8 W' f6 G% W! q+ y' ~
' N% Y" w1 c2 s! S/ P5 I
</html>[/mw_shl_code]% F/ F3 z6 Y/ {6 L2 Z
4 O5 ~! J9 c) d3 S# a
效果点击这里:
& F" I- ~- @) O& ^; S% i( p4 q( h- C# M# Q8 _4 L
http://plmhome.com/doteam/lesson1.html0 S2 a" J2 S9 Q9 ~- j8 l
0 I, z& }7 R9 X# _
; o% s5 i1 P* ]2 {7 q9 E/ m
|
|