|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
z- n# Y8 V6 B" j. \
: g# a1 T D+ h0 L废话不多说,官网自己百度下, threejs.org ,入门很简单。
6 I8 P8 U& E2 R) X3 W: X$ L7 A b* c$ E6 y: P( v
创建的javascript脚本如下/ q3 R( M) J: n! { Q8 O; }
E( r$ l! x6 _! o1 R
' w, L( g9 w" H* {[mw_shl_code=javascript,true]$ j. J0 R6 s! u9 T1 f5 C
var scene = new THREE.Scene();
4 h' Y) \% _& Y/ A3 Avar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);: h# J0 F* a I+ T& i1 }
var renderer = new THREE.WebGLRenderer();7 B& }3 I1 V4 D F
renderer.setSize(window.innerWidth, window.innerHeight);
, U( M" J' }* X/ S' Gdocument.body.appendChild(renderer.domElement);
# \8 v+ l6 `, P1 L; g5 Q1 k( ^* S# |
2 ~, G0 a7 \! [9 h/ j* ~$ E a& [// Refresh Issue
" s8 h; C% E$ z5 n6 Gwindow.addEventListener('resize', function () {
* Q. e) a( y; ~" `- q var width = this.window.innerWidth;
3 p# ~9 E' e7 i" C& X; p var height = this.window.innerHeight;
8 P% m/ n& H1 U5 _; |7 l3 C4 j( n0 W/ p render.setSize(width, height);
7 A( e0 F) ~( @3 R; P1 H1 [% t/ I camera.aspect = width / height;" v) q' T; c5 x
camera.updateProjectionMatrix();! ^5 x0 }: I X3 C
})
# @: {8 o4 F \( t. z! ^& {3 u
4 d5 R" S+ f. H//orbit contorls4 o2 f9 M- Z" y; D+ @
controls = new THREE.OrbiTControls(camera,renderer.domElement);$ \3 [6 @+ L, g4 f) A
' Y% f. B9 M+ T+ h
//create the shape4 {: [' e% \8 a9 A
var geometry = new THREE.TorusGeometry(2, 1, 16, 100); A- Q8 x; j+ n/ G# p' C$ m$ k
//create a meterial
+ X' {+ D- }9 @" j7 g) L' kvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
& B1 g1 _3 U. H+ t! l) B//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
# j" @/ d4 b ] q5 m @//var material = new THREE.MeshFaceMaterial(myMaterial);
2 s$ l1 p' o# \7 q( r
, z8 S! X4 M8 N) w; e' Q A$ \var cube = new THREE.Mesh(geometry, material);" Z7 f1 v( ^$ B, U
scene.add(cube);
9 L. K2 X p3 {0 u" mcamera.position.z = 5;
7 h" C9 S2 X+ s, _8 G
7 b) c9 x, P4 n7 a
& A+ l( V" r% q# L; W3 b* `5 N; } q0 X* ]( ~
4 V6 @- F' K6 N2 C% O5 n' {
. ~) ^! d# G. C$ l' O//rotate ' O: O# g, }! n2 J/ ^" l3 j
var update = function () {
L4 ]1 }3 Q. |5 }) } cube.rotation.x += .01;
% g6 {# n/ ?2 E cube.rotation.y += .02;' h; r+ n2 K: I m; y
cube.rotation.z += .02; y7 [ G. Z6 \2 L) }3 V
}
8 f% }- N- s5 O* V
1 D7 @( h/ _& ~# o6 p) Ovar render = function () {: L. i5 ?9 y; R. ]0 j
renderer.render(scene, camera);
+ p0 y5 O K, b0 b5 a9 w, k. ]}: p7 g/ V8 K( i- G4 P
% E' r! }2 K4 K6 k* b- T& W
; k+ b+ t" }8 @5 s
1 n o: N" t( Q6 d$ ~) W
var Gameloop = function () {( x1 C+ V5 {+ Q! p; f/ q
requestAnimationFrame(Gameloop);
5 {; \. R: m+ j/ Z update();
0 e( c6 r. X+ I9 e/ J' L# o render();' g' F+ Q2 y- u+ `: g
}# I$ d2 [, F: J. z2 ?/ `
# D: H0 v" S3 F% f3 b5 X
Gameloop();' a6 ?& r2 q) D% W
[/mw_shl_code]: q; x; L$ m7 |* d3 [
1 n1 N1 a- b7 R; L; y# S
9 ]1 z/ q; D" v( f5 w' C6 a
引入争取的html,
1 s1 Y, j8 ?" `" z0 h
0 }& `3 ^7 G t+ e' v[mw_shl_code=html,true]<!DOCTYPE html>3 A. `' D: g7 ?! l5 z
<html>" E! e3 D6 M$ H" B( @" e- Q- _ ~
* P- |4 D/ F( Z( m8 n) j<head>/ Y1 d1 b I: U' O, n% v; R
<title>hello ThreeJS</title>( d, O/ z$ S9 m4 ?- [
<style> k' \/ T$ j* |. y
body {4 F- L5 W) r' S/ O5 L
margin: 0;
# I- y' \* Q8 w- w' z. d% | }
0 }' U. x5 a7 [9 ]2 ~9 i. v, Y* l! \# c7 [2 o; t
canvas {8 r8 y! ]1 @9 D m
width: 100%;- X' W' o: E% C. p& F j, Q
height: 100%;
) Y4 k* h* P6 v( d4 j }
+ ^; N' ~# Q: a; v0 k: l5 f! p0 @' `
4 a7 g+ Y1 m; h h1 {
2 {0 w9 Y3 i# ?8 c+ l8 N color: aqua;
" C+ z! L! S; ~+ R* Y/ m }
$ Q. W- l* v9 Q </style>
7 p( z( V% g+ |3 r i) L</head>
0 u c5 ?8 ~6 D: p. W; {' u0 @5 N3 x1 N- B; P# _# L, s: Z% W, g! I
<body>
+ I& h# {3 E4 Y/ P D <script src="js/three.js"></script>
1 e! d' _% {& C8 ` <script src="js/OrbitControls.js"></script>7 p$ ^3 p. U' e3 X0 h" ]
<script src="myjs.js"></script>
' _6 W, h) B. s- @
7 o: k7 u2 R( }4 a' T) W% r' A2 [* I! I! |( Y+ H
0 z! }4 F4 e, l' _, f0 M
9 E/ p) w$ ?9 r8 m</body>& C' C/ o# b2 ?9 ~; C
5 v% Q( ^! Z6 {5 ~4 v& Q$ O& O$ k
</html>[/mw_shl_code]. q; i1 ~0 j& {& o/ h5 @
; Q! p5 a6 y3 Y% W, T3 b3 \
效果点击这里:8 e, M2 n* n9 E9 o) z
# ~: J, c7 c X6 v; h2 m3 chttp://plmhome.com/doteam/lesson1.html8 b" k" }. [. ]5 s; B/ l
$ ~, n9 J2 H3 z; X
; e Z# ^. S! p4 O
|
|