【three.js练习程序】创建地球贴图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ceshi</title>
<script type="text/javascript" src=".\build\three.js"></script>
<script src=".\examples\js\controls\TrackballControls.js"></script>
<script src=".\examples\js\controls\DragControls.js"></script>
<style>
body
{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 作为Three.js渲染器输出元素 -->
<div id="WebGL-output">
</div>
<!-- 第一个 Three.js 样例代码 -->
<script type="text/javascript"> var camera, scene, renderer;
var sphere;
var controls;
var objects = []; var fov = 45;
var near = 0.1;
var far = 1000;
init();
render(); function init() { scene = new THREE.Scene(); //创建场景 camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far); //创建摄像机
camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;
camera.lookAt(scene.position); renderer = new THREE.WebGLRenderer(); //创建一个WebGL渲染器并设置其大小
renderer.setClearColor(new THREE.Color("#000000"));
renderer.shadowMapEnabled = true;
renderer.setSize(window.innerWidth, window.innerHeight); var ambientLight = new THREE.AmbientLight("#ffffff"); //加入场景光
scene.add(ambientLight); // var pointLight = new THREE.PointLight("#ffffff"); //加入点光源
// pointLight.position.set(110, 110, 110);
// pointLight.castShadow = true;
//scene.add(pointLight); var axes = new THREE.AxisHelper(200); //创建三轴表示
scene.add(axes); controls = new THREE.TrackballControls(camera); //创建场景旋转缩放事件
controls.rotateSpeed = 2.5;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
sphere = createMesh(new THREE.SphereGeometry(100, 100, 100), "./earth.jpg");
scene.add(sphere); window.addEventListener('resize', onWindowResize, false); } function createMesh(geom, imageFile) {
var texture = THREE.ImageUtils.loadTexture(imageFile);
var mat = new THREE.MeshPhongMaterial({ map: texture });
var mesh = new THREE.Mesh(geom, mat);
return mesh;
} function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function render() {
requestAnimationFrame(render); controls.update();
sphere.material.map.needsUpdate = true;
renderer.render(scene, camera);
} document.getElementById("WebGL-output").appendChild(renderer.domElement); </script>
</body>
</html>
不知道为什么,我再IE下能显示地球,在chrome下显示不了。
地球贴图下载地址:https://pan.baidu.com/s/1kVflpNh
【three.js练习程序】创建地球贴图的更多相关文章
- 在 Web 应用中创建 Node.js 应用程序
本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Node.JS 应用程序.除 Node.JS 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Pyth ...
- 用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本
用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本 Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.可以访问和从 ...
- nw.js桌面程序自动更新(node.js表白记)
Hello Google Node.js 一个基于Google V8 的JavaScript引擎. 一个伟大的端至端语言,或许我对你的热爱源自于web这门极富情感的技术吧! 注: 光阴似水,人生若梦, ...
- [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序创建更复杂的数据模型
这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第六篇:为ASP.NET MVC应用程序 ...
- Xamarin iOS编写第一个应用程序创建工程
Xamarin iOS编写第一个应用程序创建工程 在Xcode以及Xamarin安装好后,就可以在Xamarin Studio中编写程序了.本节将主要讲解在Xamarin Studio中如何进行工程的 ...
- 编程第一个Apple Watch程序创建项目
编程第一个Apple Watch程序创建项目 2.4 编程第一个程序 本节将通过编写第一个程序,为开发者讲解如何添加Watch应用对象.运行程序.界面设计.编写代码等内容本文选自Apple Watc ...
- Contoso 大学 - 1 - 为 ASP.NET MVC 应用程序创建 EF 数据模型
原文 Contoso 大学 - 1 - 为 ASP.NET MVC 应用程序创建 EF 数据模型 原文地址:Creating an Entity Framework Data Model for an ...
- MVC中使用EF(1):为ASP.NET MVC程序创建Entity Framework数据模型
为ASP.NET MVC程序创建Entity Framework数据模型 (1 of 10) By Tom Dykstra |July 30, 2013 Translated by litdwg ...
- 为ASP.NET MVC应用程序创建更复杂的数据模型
为ASP.NET MVC应用程序创建更复杂的数据模型 2014-05-07 18:27 by Bce, 282 阅读, 1 评论, 收藏, 编辑 这是微软官方教程Getting Started wit ...
随机推荐
- JavaScript -- Window-Name
-----027-Window-Name.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=& ...
- Python做int()强制类型转换的时候,小数是如何取舍的?
白月黑羽今天给大家分享一个冷知识:) int()强制类型转换小数是如何取舍的? 使用 int() 将小数转换为整数,小数取整会采用比较暴力的截断方式,即小数点后面的会被强制舍去,向下取整. 例如:5. ...
- Jdbc Url 设置allowMultiQueries为true和false时底层处理机制研究
一个mysql jdbc待解之谜 关于jdbc url参数 allowMultiQueries 如下的一个普通JDBC示例: String user ="root"; Strin ...
- gateway-workman
最外层start.php,设置全局启动模式,加载Application里的个子服务目录下应用的启动文件(start开头,这些文件都是workman\work类的子类,在载入文件的同时,这些子服务会生成 ...
- Android so 文件进阶<三> so文件的简单加密
0x00 前言 之前的两篇文章从链接视图和执行视图分析了elf文件的大致结构,这篇文章主要内容是对于so文件进行简单的加密工作,针对Ida等静态分析工具的分析,一旦开始动态调试就应该很容易就可以du ...
- 【详解】核心组件之UserDetailService
简介 UserDetails => Spring Security基础接口,包含某个用户的账号,密码,权限,状态(是否锁定)等信息.只有getter方法. Authentication => ...
- Android性能测试--垃圾回收频次统计的作用
频繁的垃圾回收有可能暗示着内存泄露,在我手机统计数据,每次垃圾回收会占据100ms左右,这对内存和事件响应要求严格的程序(游戏等)来讲是可观的性能损耗.
- Spring 环境与profile(一)——超简用例
什么是profile,为什么需要profile? 在开发时,不同环境(开发.联调.预发.正式等)所需的配置不同导致,如果每改变一个环境就更改配置不但麻烦(修改代码.重新构建)而且容易出错.Spring ...
- deque双端队列(常用方法总结)
/*关于C++ STL中deque的学习*/ #include<cstdio> #include<iostream> #include<deque> using n ...
- Pycharm---新建文件时 自动添加作者时间等信息
可用的变量有: $ {PROJECT_NAME} - 当前项目的名称. $ {NAME} - 在文件创建过程中在“新建文件”对话框中指定的新文件的名称. $ {USER} - 当前用户的登录名. $ ...