让一个基本的three.js webgl示例在sails.js中工作
making a basic three.js webgl example work in sails.js
我试图在默认的欢迎屏幕中将基本的webgl粒子示例从three.js添加到sails.js框架activityOverlord示例中。因此，我首先将需要的三个javascript库复制/粘贴到链接器/js文件夹中，并将它们添加到grunt文件中:
<script src="/linker/js/three.min.js"></script>
<script src="/linker/js/Detector.js"></script>
<script src="/linker/js/stats.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title><%- title %></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `link` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' boilerplate asset management.
By default, tylesheets from your `assets/linker/styles` folder are included
here automatically. Both CSS (.css) and LESS (.less) are supported.
In production, your styles will be minified and concatenated into a single file.
To customize any part of the built-in behavior, just edit your Gruntfile.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--STYLES-->
<link rel="stylesheet" href="/linker/styles/bootstrap.css">
<link rel="stylesheet" href="/linker/styles/custom.css">
<!--STYLES END-->
<!--Added this so the client has access to the csrf tag and it's grabbed first service side on every page -->
<script type="text/javascript">
window.overlord = { csrf: "<%= _csrf %>" };
</script>
<!-- The sound file tht will play on activity events -->
<audio id="chatAudio">
<source src="/sounds/notify.ogg" type="audio/ogg">
<source src="/sounds/notify.mp3" type="audio/mpeg">
<source src="/sounds/notify.wav" type="audio/wav">
</audio>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"> activityOverlord</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<% if (session.authenticated) { %>
<li class="active"><a href="/user/show/<%= session.User.id %>"><%= session.User.name %> </a> </li>
<% } %>
<% if (session.authenticated && session.User.admin) { %>
<li><a href="/user">User Administration</a></li>
<li><a href="#">Placeholder2</a></li>
<% } %>
</ul>
<div class="navbar-right">
<% if (session.authenticated) { %>
<a class="btn btn-default navbar-btn navbar-right" href="/session/destroy">sign-out</a>
<% } %>
</div>
<% if (!session.authenticated) { %>
<form class="navbar-form navbar-right" action="/session/create">
<div class="form-group">
<input type="text" placeholder="Email" name="email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<% } %>
</div>
</div>
</div>
<%- body %>
<!-- <div class="container">
<hr>
<footer class="footer pull-right">
<div>
<a href="http://sailsjs.com/">sails.js</a>
<div>tutorial by irl nathan, with a bunch of help from cody, gabe, heather, mike, scott and zoli</div>
</div>
</footer>
</div>-->
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/linker/templates` folder, then
include them here automatically.
To customize this behavior to fit your needs, just edit your Gruntfile.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your templates using a server-side stringfile
before they're served.
-->
<!--TEMPLATES-->
<script type="text/javascript" src="/jst.js"></script>
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' boilerplate asset management.
By default, filesin your `assets/linker/js` folder are included here
automatically. Both JavaScript (.js) and CoffeeScript (.coffee) are supported.
In production, your scripts will be minified and concatenated into a single file.
To customize any part of the built-in behavior, just edit your Gruntfile.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<script src="/linker/js/socket.io.js"></script>
<script src="/linker/js/sails.io.js"></script>
<script src="/linker/js/jquery.js"></script>
<script src="/linker/js/jquery.validate.min.js"></script>
<script src="/linker/js/app.js"></script>
<script src="/linker/js/three.min.js"></script>
<script src="/linker/js/Detector.js"></script>
<script src="/linker/js/stats.min.js"></script>
<script src="/linker/js/bootstrap.js"></script>
<script src="/linker/js/customValidate.js"></script>
<script src="/linker/js/underscore.js"></script>
<!--SCRIPTS END-->
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - buffergeometry - lines</div>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
container = document.getElementById( 'container' );
//
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 4000 );
camera.position.z = 2750;
scene = new THREE.Scene();
var segments = 10000;
var geometry = new THREE.BufferGeometry();
var material = new THREE.LineBasicMaterial({ vertexColors: true });
geometry.addAttribute( 'position', new Float32Array( segments * 3 ), 3 );
geometry.addAttribute( 'color', new Float32Array( segments * 3 ), 3 );
var positions = geometry.getAttribute( 'position' ).array;
var colors = geometry.getAttribute( 'color' ).array;
var r = 800;
for ( var i = 0; i < segments; i ++ ) {
var x = Math.random() * r - r / 2;
var y = Math.random() * r - r / 2;
var z = Math.random() * r - r / 2;
// positions
positions[ i * 3 ] = x;
positions[ i * 3 + 1 ] = y;
positions[ i * 3 + 2 ] = z;
// colors
colors[ i * 3 ] = ( x / r ) + 0.5;
colors[ i * 3 + 1 ] = ( y / r ) + 0.5;
colors[ i * 3 + 2 ] = ( z / r ) + 0.5;
}
geometry.computeBoundingSphere();
mesh = new THREE.Line( geometry, material );
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaInput = true;
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '350px';
container.appendChild( stats.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = Date.now() * 0.001;
mesh.rotation.x = time * 0.25;
mesh.rotation.y = time * 0.5;
renderer.render( scene, camera );
}
</script>
有没有人知道我在ejs视图文件中注入three.js javascript代码做错了什么，这样我就可以在不同的视图中启动不同的three.js程序
刚刚找到的解决方案，添加webgl程序从three.js在ejs视图在帆…真的很简单。three.js的javascript代码可以添加到其中一个视图的容器中，只要在布局中添加<%- body %>即可。Ejs位于库的下面…结果看起来非常漂亮:)见图片:plus.google.com/111811850549054618411/posts/bMuE6VXpnUt
相关文章：
- Three.js，WebGL，渲染六幅图像的全景图
- 如何使用 THREE.js/WebGL 将 2D 绘图转换为 3Drawing
- 未捕获的类型错误:在WebGL中使用Three.js键入错误
- WebGL Three.js在画布Div可见之前，不会加载某些内容
- 如何使用THree.js和webGL将交互式图像或元素嵌入到全景图像查看器中
- 如何在ruby on rails中保存和发布Webgl中的JS代码结果
- 在three.js程序中运行一个webgl函数
- 构建一个移动友好的浏览器游戏 - Pure JS，Jquery，Flash，Unity或WebGL
- 使用三.js和
- 三.js WebGL 网格材质获得与画布背景相同的颜色
- cytoscape.js webgl renderer
- Pixi.js / WebGL方法，用于将数据模型坐标转换为画布像素坐标
- Three.js WebGL渲染器未更新面上的Color属性
- 在Three.js(WebGl Renderer）中制作几何图形可点击的超链接
- Three.js WebGl调整对象大小的怪异行为
- Three.js/WebGL一次加载大量纹理数据，操作方法
- Three.js/WebGL和2D Canvas——将getImageData()数组传递给Three.DataText
- 如何在Javascript中绘制3d blezier曲线?(three.js, webGL)
- 让一个基本的three.js webgl示例在sails.js中工作
- 如何在three.js/WebGL中更改STL对象的不透明度
