three.js的接口程序
来源:互联网 发布:两表联合查询sql语句 编辑:程序博客网 时间:2024/06/05 06:27
<!DOCTYPE html>
<html><head> <title>Example 01.02 - First Scene</title> <script type="text/javascript" src="../libs/three.js"></script> <style> body { /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overflow: hidden; } </style></head><body><!-- Div which will hold the Output --><div id="WebGL-output"></div><!-- Javascript code that runs our Three.js examples --><script type="text/javascript"> // once everything is loaded, we run our Three.js stuff. function init() { // create a scene, that will hold all our elements such as objects, cameras and lights. var scene = new THREE.Scene(); // create a camera, which defines where we're looking at. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // create a render and set the size var renderer = new THREE.WebGLRenderer(); renderer.setClearColorHex(); renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(window.innerWidth, window.innerHeight); // show axes in the screen var axes = new THREE.AxisHelper(20); scene.add(axes); // create the ground plane var planeGeometry = new THREE.PlaneGeometry(60, 20); var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); // rotate and position the plane plane.rotation.x = -0.5 * Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; // add the plane to the scene scene.add(plane); // create a cube var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // position the cube cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; // add the cube to the scene scene.add(cube); // create a sphere var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: false}); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // position the sphere sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; // add the sphere to the scene scene.add(sphere); // position and point the camera to the center of the scene camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // add the output of the renderer to the html element document.getElementById("WebGL-output").appendChild(renderer.domElement); // render the scene renderer.render(scene, camera); } window.onload = init;</script></body></html>代码是《Three.js开发指南》的基础程序。
0 0
- three.js的接口程序
- 第一个three.js程序
- 第一个three.js程序
- Three.js的学习心得
- 33 Three.js的材质THREE.MeshBasicMaterial
- 34 Three.js的材质THREE.MeshDepthMaterial
- Three.js 是干什么的?
- 使用Three.js的材质
- three.js的各种材质
- three.js光源的应用
- Three.js中OrbitControls.js的用法
- Three.js中FirstPersonControls.js的用法
- 小八——WebGL心路历程(2),一个基于Three.js的webGL程序解析
- 24 Three.js的环境光源THREE.AmbientLight
- 25 Three.js的点光源THREE.PointLight
- 26 Three.js的聚光灯光源THREE.SpotLight
- 27 Three.js的平行光THREE.DirectionalLight
- three.js
- Events-Today In History
- 8大排序算法图文讲解
- 日常工作反思
- linux下软件包的安装
- java反射之正题
- three.js的接口程序
- Caused by: java.lang.IllegalArgumentException: java.net.UnknownHostException: mycluster
- mysql 用户权限管理
- 【Android】方法数查看工具---DexCount
- VS2010中添加ActiveX控件
- Android Hugo 使用
- sort-list
- 反调试(未完工)
- Spring定时任务的几种实现