three.js 初学小示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body { margin: ; }
canvas { width: %; height: % }
</style>
<script src="./node_modules/three/three.js"></script>
<script src="./node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script src="./node_modules/three/examples/js/loaders/OBJLoader.js"></script>
</head>
<body> <script>
var scene = new THREE.Scene();//创建场景 var geometry = new THREE.BoxGeometry(,,) //创建正方形 长宽高
var material = new THREE.MeshBasicMaterial({color:0xff0000})// 创建材质
var mesh = new THREE.Mesh(geometry,material)//创建网格
scene.add(mesh);
var light = new THREE.PointLight(0xffffff);//创建光源
light.position.set(,,)
scene.add(light)//添加光源 scene.add(new THREE.AmbientLight(0x333333)) var camera = new THREE.PerspectiveCamera(,/,,); //创建相机
camera.position.set(,,);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer(); //渲染器
renderer.setSize(,);
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);
function render(){
renderer.render(scene,camera); }
var controls = new THREE.OrbitControls(camera); //相机控制器 鼠标
controls.addEventListener('change',render)
// var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // var renderer = new THREE.WebGLRenderer();
// renderer.setSize( window.innerWidth, window.innerHeight );
// document.body.appendChild( renderer.domElement );
</script>
</body>
</html>
three.js 初学小示例的更多相关文章
- MVC客户端验证的小示例
MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings> <add key="ClientValidat ...
- node.js 初学(一)—— http fs 服务器/文件/post get
node.js 初学 —— http fs 服务器/文件/post get 这个世界,从来不会给失败者颁奖! 了解 node.js (开源) node.js 是用来做后台开发的,但是现在大部分前端人员 ...
- JS处理事件小技巧
今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...
- ReactNative新手学习之路06滚动更新ListView数据的小示例
本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 撸一个JS正则小工具
写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...
- Node.js初学
Node.js 初学~ 其技术上最大的卖点是非阻塞的I/O和基于事件的异步处理机制. 后端没有什么深入研究,一直对其不是很了解. 透过一个例子看 非阻塞 与 通常的 阻塞 var text = rea ...
- node.js 初学(二)—— 搭建注册/登录服务器
node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...
- pixi.js 微信小游戏 入手
pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...
随机推荐
- [Angular] AuthService and AngularFire integration
Config AngularFire, we need database and auth module from firebase. import {NgModule} from '@angular ...
- Scala基础知识(二)
1.条件表达式 object ConditionDemo { def main(args: Array[String]) { val x = //判断x的值,将结果赋给y val y = ) //打印 ...
- express 学习笔记(一)路由
先导入express: var express = require('express'); var app = express(); 1.路由方法: get, post, put, head, del ...
- mybatis-generator使用
开发工具:eclipse,依赖环境 :maven 首先在eclipse marketplace中安装mybatis-generator,如图: 安装后需要重启. 新建一个maven项目MybatisG ...
- spark原理介绍 分类: B8_SPARK 2015-04-28 12:33 1039人阅读 评论(0) 收藏
1.spark是一个基于内存计算的开源的集群计算系统,目的是让数据分析更加快速.因此运行spark的机器应该尽量的大内存,如96G以上. 2.spark所有操作均基于RDD,操作主要分成2大类:tra ...
- ASCII码的问题
数字0在ASCII的不同进制下表示:
- 6 、字符编码笔记:ASCII,Unicode和UTF-8
1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出 256种状态,这被称为一个字节(byte) ...
- swift学习第十天:函数
函数的介绍 函数相当于OC中的方法 函数的格式如下 func 函数名(参数列表) -> 返回值类型 { 代码块 return 返回值 } func是关键字,多个参数列表之间可以用逗号(,)分隔, ...
- java痛苦学习之路[十二]JSON+ajax+Servlet JSON数据转换和传递
1.首先client须要引入 jquery-1.11.1.js 2.其次javawebproject里面须要引入jar包 [commons-beanutils-1.8.0.jar.commons-c ...
- Sphinx+MySQL5.1x+SphinxSE+mmseg中文分词
什么是Sphinx Sphinx 是一个全文检索引擎,一般而言,Sphinx是一个独立的搜索引擎,意图为其它应用提供快速.低空间占用.高结果相关度的全文搜索功能.Sphinx能够很easy的与SQL数 ...